Как избежать бесконечного цикла с помощью useEffect
Когда я пытаюсь использовать useEffect для получения обновленных данных только при обновлении данных, я получаю бесконечный цикл, потому что после каждой выборки массив данных в массиве зависимостей теряет ссылку. Есть ли способ заставить useEffect вызывать метод выборки только при изменении данных?
useEffect(() => { fetchFunc(); }, [data]);
Ответы 1
Изменение данных => огонь useEffect -> fetchData () -> изменяет данные -> изменение данных -> огонь useEffect -> fetchData () -> бесконечный цикл
не уверен, чего вы пытаетесь достичь, но предполагаю, что вы хотите получить данные с сервера для изменения данных. Данные в любом случае не связаны с вашим сервером, поэтому, когда на сервере происходит обновление, данные не изменяются. вам необходимо получить с сервера, чтобы обновить данные.
у вас есть два варианта
Опрос
Самый простой в реализации. Создайте функцию, которая будет опрашивать сервер с заданным интервалом на предмет любых изменений, которые затем изменят ваши данные клиента с результатами.
const fetchTimeoutRef = useRef(); //fetchTimeoutRef.current will hold a value you can use to cancel the polling if required.
const pollInterval = 5000; //5000ms poll interval, 5 seconds
useEffect() => {
fetchTimeoutRef.current = setTimeout(() => {
fetchData(); //this will modify data with the results from the API
},5000);
return (() => {
clearTimeout(fetchTimeoutRef.current); //ensure you clean up
});
},[])
Веб-сокеты
веб-сокеты может использоваться для обновления клиента данными в «реальном времени» или на основе событий. реализация будет зависеть от вашего технического стека.
Когда меняют
data? А точнее:fetchFunc()ставитdata?