Primero, mire el código.
const [currentUserPK, setCurrentUserPK] = useState(undefined); const [currentPage, setCurrentPage] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(10); //현재 USER_PK 가져오는 API const getCurrentUserPk = async () => { const url = '/api/account/decoding-token'; const res = await get(url) .then((res) => { console.log(res); setCurrentUserPK(res.data.USER_PK); }) .catch((error) => { console.log(error); }); }; useEffect(() => { getCurrentUserPk() },[]); //생성된 액션 아이템 불러오기 API const getActionItems = async () => { const url = `/api/work/view-items`; const params = { id: currentUserPK, currentPage: currentPage, feedsPerPage: rowsPerPage, }; await get(url, { params: params }).then((res) => { setActionItemArray(res.items); console.log(res.items); console.log(actionItemArray); }); }; useEffect(() => { getActionItems(); }, [currentPage, rowsPerPage, actionItemArray]);El problema ocurre con este siguiente código.
useEffect(() => { getActionItems(); }, [currentPage, rowsPerPage, actionItemArray]);Cuando agrego actionItemArray en la segunda matriz de argumentos, sigue en bucle
console.log(res.items); console.log(actionItemArray);estos dos eventos de console.log.
Cuando elimino actionItemArray del segundo argumento de useEffect Hook, tengo que actualizar mi página a los elementos de acción agregados, eliminados y editados.
No tengo idea de por qué sucede. ¡Por favor ayuda!
useEffect está llamando a una función que está cambiando de estado: setActionItemArray() . El cambio de estado desencadena otro procesamiento que, a su vez, llamará al useEffect nuevamente y comenzará el proceso nuevamente.
useEffect se ejecuta en el procesamiento inicial, y luego, debido a la forma en que lo implementó, se ejecutará cada vez que cambie una de las dependencias en la matriz. Entonces, dado que se está ejecutando cuando la página se carga por primera vez, está iniciando su ciclo infinito en cada carga de página
"dependencias" (segundo argumento) de useEffect significa que el cambio de valores debería desencadenar "el efecto" (primer argumento)
En efecto, cambia actionItemArray , que también se pasa a las dependencias.