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时，最好使用callback选项，以捕获以下状态的先前版本：

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)

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

3 个答案: