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

React useEffect挂钩采用第一个参数。正确的方法不是设置对用户的依赖关系，而是在设置users时获取其值：

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

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

使用useEffect添加状态而不进入无限循环

1 个答案: