Реагировать на ошибку 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)

Answer 3

изменить const {loggedIn, setLoggedIn} = useState(false)

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

Не используйте {} для объявления переменной useState и ее функции установки, используйте вместо них [].