使用钩子时反应handleClick按钮抛出错误答案

【问题标题】：React handleClick button throwing error while using hooks使用钩子时反应handleClick按钮抛出错误
【发布时间】：2020-08-20 04:11:15
【问题描述】：

import React, {useState} from "react"

const App = () => {
    const {loggedIn, setLoggedIn} = useState(false)

    const handleClick = () => {
        setLoggedIn(!loggedIn)
    }

    return (
        <div>
            <h1>You are {loggedIn ? 'logged in' : 'logged out'}</h1>
            <button onClick={handleClick}>{loggedIn ? 'Log Out' : 'Log In'}</button>
        </div>
    )

}

export default App

我正在使用钩子编写一些代码，当我单击按钮时，没有任何反应，控制台显示未知错误消息。

我尝试将其更改为：

() => handleClick
handleClick()

但它们都不起作用。

代码有什么问题？

【问题讨论】：

标签： javascript reactjs button react-hooks

【解决方案1】：

问题是useState 以[] 而不是{} 返回。

您应该使用以下内容：

const [loggedIn, setLoggedIn] = useState(false);

+1 建议：

另外，在使用setLoggedIn 时最好使用回调选项，以便捕获之前版本的状态，如下所示：

const handleClick = () => {
   setLoggedIn(prev => !prev);
}

我希望这会有所帮助！

【讨论】：

@freudianrudin 随时告诉我进展如何。

【解决方案2】：

更改const {loggedIn, setLoggedIn} = useState(false)

收件人：const [loggedIn, setLoggedIn] = useState(false)

不要使用{} 来声明useState 变量，它的setter 函数使用[] 这些来代替。

【讨论】：

点击向上按钮表示对stackoverflow的赞赏lol xD

【解决方案3】：

您正在错误地解构状态值并更改处理程序。它返回一个元组，因此您需要获取如下值：

const [loggedIn, setLoggedIn] = useState(false)

【讨论】：