如何使用useEffect避免无限循环

Question

当我试图让useEffect只在数据更新时提取更新的数据时，我会得到无限循环，因为每次提取后，依赖数组中的数据数组都会丢失引用。有没有一种方法可以使useEffect在数据更改时只调用fetch方法？

useEffect(() => { fetchFunc(); }, [data]);

Answer 1

数据更改=>fire useEffect->fetchData((->修改数据->数据更改->fire 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
});
},[])

Websockets

websocket可以用来用"中的数据更新客户端；"实时"；或基于事件。实现将取决于您的技术堆栈。