Question

当我尝试让 useEffect 仅在数据更新时获取更新的数据时，我会陷入无限循环，因为每次获取后，依赖数组中的数据数组都会失去引用。有没有办法让useEffect只在数据改变时调用fetch方法？

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

Answer 1

Data Change => 触发 useEffect -> fetchData() -> 修改数据 -> Data Change -> 触发 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

websockets 可用于“实时”或基于事件更新客户端的数据。实施将取决于您的技术堆栈。

如何使用useEffect避免无限循环

1 个答案: