React`useState`鈎子-設置狀態並立即使用

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}`
    );
}