为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

Helenr 2021-05-31 13:51:27
我正在尝试创建一个自定义 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;}
查看完整描述

3 回答

?
达令说

TA贡献1821条经验 获得超6个赞

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道具。


查看完整回答
反对 回复 2021-06-03
?
qq_花开花谢_0

TA贡献1835条经验 获得超7个赞

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


查看完整回答
反对 回复 2021-06-03
  • 3 回答
  • 0 关注
  • 290 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信