Question

我了解到，更改状态会导致再次调用组件函数，而新的状态是从useState钩派生的。在设置状态的函数中，状态保持不变，因为内部定义的任何函数都将覆盖该状态。

这是一个我无法找到好的图案的例子：

  const fetchUsers = async () => {
    const result = await axios.get(
      `http://localhost:3001/get_users/${pageNumber}`
    );
   }

  const loadMore = () => {
    setPageNumber(pageNumber + 1);
    fetchUsers();
  };

这当然是行不通的，因为fetchUsers无法访问更新后的状态。

  const loadMore = () => {
    setPageNumber(pageNumber + 1);
    fetchUsers(pageNumber + 1);
  };

我可以这样做，但是似乎不太清楚。有更好的方法吗？

Answer 1

您可以在useEffect内以pageNumber作为依赖项来调用fetchUsers。

useEffect(fetchUsers, [pageNumber])

只要pageNumber更改，useEffect就会调用fetchUsers。

Answer 2

为此，您可以使用useEffect挂钩。您可以给它一个函数和一个数组作为参数。如果数组中的任何变量发生更改（例如您赋予它的状态var），则将调用该函数。您将可以在其中使用最新的pageNumber。

const [ pageNumber, setPageNumber ] = useState(1);

const loadMore = () => {
    setPageNumber(pageNumber + 1);
};

/* Be careful, this function will also run on mount. If you want to prevent that make use of some isMounted boolean inside it. */
useEffect(() => {
    fetchUsers(pageNumber);
}, [ pageNumber ]);

const fetchUsers = async (toFetchPageNumber) => {
    const result = await axios.get(
        `http://localhost:3001/get_users/${toFetchPageNumber}`
    );
}

React`useState`钩子-设置状态并立即使用

2 个答案: