关于useEffect中的无限循环

Posted 2023-02-09

[我正在尝试使用react钩子构建一个redux进程，下面的代码是我想使用getUsers（redux action）调用来模拟一个ComponentDidMount函数，这是一个获取数据的http请求。

第一个版本是这样的

const  state, actions  = useContext(StoreContext);
const  getUsers  = actions;

useEffect(() => 
  getUsers();  // React Hook useEffect has a missing dependency: 'getUsers'.
, []);

但是我收到了警告：“ React Hook useEffect缺少依赖项：'getUsers'。要么包含它，要么删除依赖关系数组”在useEffect中，

然后我将getUsers添加到依赖项数组，但在那里出现无限循环

useEffect(() => 
  getUsers(); 
, [getUsers])

现在我可以通过使用useRef找到解决方案

const fetchData = useRef(getUsers);

useEffect(() => 
  fetchData.current();
, []);

不确定这是否是正确的方法，但是确实解决了棉绒和无限循环（暂时？）

我的问题是：在第二版代码中，到底是什么导致了无限循环？每次渲染后，依赖数组中的getUsers是否会更改？

答案

您应该在useEffect内声明getUsers，这是您调用getUsers的唯一位置

useEffect(() => 
 const  getUsers  = props;
  getUsers();
, []);