Добавление массива в массив зависимостей useEffect вызывает бесконечный цикл
Простое приложение, в котором перечислены мои задачи и которое позволяет мне отправлять новые. Подключен к REST API, который я создал, поэтому задачи извлекаются с помощью вызова этого API. Я использую useEffect, чтобы получить все задачи и сохранить их в массиве задач. Это должно выполняться каждый раз при изменении массива (когда я добавляю новую задачу, удаляю задачу и т. д.), поэтому мне не нужно обновляться, чтобы увидеть изменения.
код использования эффекта:
const [tasks, setTasks] = useState([])
useEffect(() => {
axios.get("http://localhost:8000/api/task-list")
.then(response => {
setTasks(response.data)
})
.catch(error => {
console.info(error)
})
}, [tasks])
Проблема сейчас в том, что почти бесконечные вызовы к моему API. Работает бесконечно и не только при изменении массива задач. Я думаю, это как-то связано с проверкой tasks === tasks и тем, что они не такие, какими кажутся. Но я не уверен.
Я был бы очень признателен за любую помощь, потому что я не могу просто продолжать в том же духе, делая бесконечные вызовы API. Это работает только сейчас, потому что API принадлежит мне.
Ответы 2
если у вас есть tasks в массиве зависимостей, то эффект вызывается при каждом изменении tasks.
Поскольку вы обновляете задачи внутри эффекта, он снова вызывает тот же эффект. и так далее.
Вам нужно иметь пустой массив в качестве зависимостей, если вы хотите запустить его только один раз, и если он зависит от какого-либо состояния, добавьте это.
какова цель наличия [tasks] в качестве зависимости?
Поскольку вы можете изменять tasks только с помощью setTasks, нет смысла использовать его как зависимость. обычно у вас будет какое-то другое изменение состояния (например, нажатие кнопки), которое должно обновить задачи.
загляните в документы для поведения useEffect
Это цикл: ваш эффект запускается каждый раз при изменении tasks. Сам эффект изменяет массив tasks, поэтому он запускается снова и т. д.
Вы должны запустить его только один раз, когда компонент монтируется, и вы можете добиться этого с помощью пустого массива зависимостей:
useEffect(() => {
axios.get("http://localhost:8000/api/task-list")
.then(response => {
setTasks(response.data)
})
...
}, [])
Затем вам нужно создать обратные вызовы функций для событий, которые удаляют/добавляют элементы в ваш список. Например:
const addTask = () => {
const newTask = ... // the value of your new task, eg. got from an input, ...
setTasks(prevTasks => prevTasks.push(newTask));
};
...
<Button onClick = {addTask}> Add it! </Button>
мой Бог. Да, я знал об этом поведении, но я не мог оставить массив зависимостей пустым, потому что думал, что это единственный способ вернуть свои задачи. Но черт возьми, я тупой, как ты сказал, я могу запускать setTasks после нажатия кнопки, а не только внутри useEffect. Мои извинения