使用钩子时React handleClick按钮抛出错误

Question

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()

但它们都不工作。

这段代码有什么问题？

Answer 1

问题是 useState 正带着 [] 而不是 {}.

你应该有以下内容代替。

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

+1建议。

另外，在使用回调选项时，最好使用 setLoggedIn 以便捕捉到上一版本的状态，如下图所示。

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

希望对你有所帮助！

Answer 2

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

要: const [loggedIn, setLoggedIn] = useState(false)

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

Answer 3

你不正确地重构了状态值和变更处理程序。它返回的是一个元组，所以你需要像这样获取值。

const [loggedIn, setLoggedIn] = useState(false)