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

Question

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

错误

React Hook "useLastPage" is called in function "handleLastPage" which is neither a React function component or a custom React Hook function

在以下代码中：

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

我的代码与 React Doc 的自定义挂钩示例非常相似，因此我不确定如何在我的自定义挂钩中调用 useLastPage。以下是来自 React's Doc 的示例：

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

我认为你的主要问题是你正在调用你的 set 函数 useLastPage - React linter 查找以单词 use 开头的函数并尝试 'lint' 它们作为钩子。在这种情况下 useLastPage 不是一个钩子，它是 useState 返回的 setter。我怀疑如果您调用它 setLastPage 会为您清除错误消息。

Answer 2

React 很困惑，因为您正在使用 useLastPage 作为 const [lastPage, useLastPage] = useState(page) 的更新程序。

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

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

Answer 3

useEffect 类似于 componentDidMount 和 componentDidUpdate。当 Component 为 mounted/updated 时，它将运行。要减少 lastPage 状态值，您只需在 useState 回调中直接调用其 setter 即可。我还建议将 setter 前缀更改为 set 而不是 use

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

如果您想更改按钮点击时的值，那么您需要在 useEffect 之外编写处理程序并将其设置为按钮的 onClick 属性。

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

How do you properly call useState within a React custom Hook?

javascript

reactjs

react-hooks