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

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

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

在以下代码中：

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

我的代码与React文档的自定义钩子示例非常相似，因此我不确定如何在自定义钩子中调用

useLastPage

。以下是来自的示例：

---

我认为您的主要问题是您正在调用set函数

useLastPage

——React linter查找以单词

use

开头的函数，并尝试将它们作为钩子“lint”。在本例中，

useLastPage

不是钩子，而是从

useState

返回的setter。我怀疑如果您调用它，它将为您清除错误消息。

React是混乱的，因为您正在使用

useLastPage

作为

const[lastPage，useLastPage]=useState（page）

的更新程序

尝试将

useLastPage

更改为

setLastPage

。您应该使用

use

前缀作为挂钩

---

查看演示-

useffect

类似于

componentDidMount

和

componentdiddupdate

。它将在安装/更新

组件时运行。要减少
lastPage
状态值，只需直接在useState回调中调用其setter。我还建议将setter前缀改为
set
，而不是
use

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

如果要更改按钮单击时的值，则需要在
useffect
外部写入处理程序，并将其设置为按钮的
onClick
属性
 错误消息表示useEffect不能返回任何内容。另外，你能详细说明一下让处理程序在useffect之外吗？对不起，返回的应该是你的自定义钩子。不是效果。啊，好的。另外，使用钩子的规则之一是“不要在事件处理程序中调用”。我如何使用上面定义的钩子由按钮触发？因为这是您在这里创建的自定义钩子。您可以在react应用程序的任何位置使用此功能。你的自定义钩子基本上是一个函数，它将获取一个值，并在递减1后返回。谢谢你的演示。我如何通过按下按钮来调用usePrevPage？无论我从何处调用它，我总是得到“无效的钩子调用。钩子只能在函数组件的主体内部调用”。@Kevvv在这种情况下，钩子看起来是不必要的，因为
useffect
是针对生命周期的，而您希望处理事件（不涉及生命周期钩子）。您只需使用
useState
处理“App”中的点击事件，就像我在本演示中所做的那样
function usePrevPage (page) {
    const [lastPage, setLastPage] = useState(page);
    useEffect(() => {
          setLastPage(page-1);
    });
    return lastPage;
}