如何使用 useEffect 避免无限循环

Question

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

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

Answer 1

数据更改 => 触发 useEffect -> fetchData() -> 修改数据 -> 数据更改 -> 触发 useEffect -> fetchData() -> 无限循环

不确定您要实现什么，但我假设您想从服务器获取数据以修改数据。 无论如何，数据都不会链接到您的服务器，因此当服务器上发生更新时，数据不会更改。 您需要从服务器获取更新数据。

你有两个选择

轮询

最容易实现。 创建一个 function 它将以设定的时间间隔轮询服务器以获取任何更改，然后使用结果修改您的客户端数据。

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可用于以“实时”或基于事件的方式使用数据更新客户端。 实施将取决于您的技术堆栈。