"useEffect"在不进入无限循环的情况下添加到状态

Question

const fetchUsers = async () => {
const result = await axios.get(
`http://localhost:3001/get_users/per_page/10/page_number/0`
);
setUsers([...users, ...result.data.users]);
setListUsersQueryState("complete");
};
useEffect(() => {
fetchUsers();
}, []);
const loadMore = () => {
fetchUsers();
};

useEffect最初应在加载时调用，因此[]作为依赖项。然后，每次按下"加载更多"按钮时都应调用它。

使用上面的代码反应抱怨

React Hook useEffect has a missing dependency: 'fetchUsers'. Either include it or remove the dependency array

Answer 1

ReactuseEffect钩子采用第一个参数。执行此操作的正确方法不是设置对用户的依赖关系，而是在设置时获取users的值，如下所示：

setUsers(users => [...users, ...result.data.users]);

现在它不会进入无限循环，但 react 仍然很高兴依赖关系得到满足。