如何在 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

useEffect类似于componentDidMount和componentDidUpdate。当它运行Component正mounted/updated。要减少lastPage状态值，您可以直接在 useState 回调中直接调用它的 setter。另外我建议将 setter 前缀更改set为usefunction usePrevPage (page) {    const [lastPage, setLastPage] = useState(page);    useEffect(() => {          setLastPage(page-1);    });    return lastPage;}如果要更改按钮单击时的值，则需要在外部编写处理程序useEffect并将其设置为按钮的onClick道具。

Answer 2

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