如何在 React 自定义 Hook 中正确调用 useState？

Question

我正在尝试创建一个自定义 Hook，它允许我传递一个值并在按下按钮时减去 1。我目前收到的错误是

React Hook“useLastPage”在函数“handleLastPage”中调用，该函数既不是 React 函数组件，也不是自定义 React Hook 函数

在下面的代码中：

function usePrevPage (page) {
    const [lastPage, useLastPage] = useState(page)
    useEffect(() => {
        function handleLastPage(page) {
            useLastPage(page - 1)
        }
        handleLastPage()
    })
    return lastPage
}

我的代码密切反映了 React Doc 的自定义钩子示例，因此我不确定如何useLastPage在我的自定义钩子中调用。以下是React 文档中的示例：

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

Answer 1

useLastPage当您使用 的更新程序时，React 会感到困惑const [lastPage, useLastPage] = useState(page)。

尝试更改useLastPage为setLastPage. 您应该使用use钩子前缀。

查看演示 - https://codesandbox.io/s/crazy-neumann-hgely