Question

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

的错误

在函数“ handleLastPage”中调用反应挂钩“ useLastPage” 既不是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'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

当您使用useLastPage来更新const [lastPage, useLastPage] = useState(page)时，反应很混乱。

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

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

Answer 2

useEffect与componentDidMount和componentDidUpdate相似。它会在Component正在mounted/updated时运行。要减小lastPage状态值，您可以直接在useState回调内部直接调用其setter。另外，我建议将设置器前缀更改为set而不是use

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

如果要更改按钮单击的值，则需要在useEffect外部编写处理程序，并将其设置为按钮的onClick属性。

Answer 3

我认为您的主要问题是您正在调用集合函数Ok(0)-React linter寻找以单词useLastPage开头的函数，并尝试将它们“钩住”。在这种情况下，use不是钩子，而是useLastPage返回的二传手。我怀疑如果将其命名为useState，将会为您清除错误消息。

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

3 个答案: