Início / coding / Perguntas / 77478963
Accepted
vbulash
Asked: 2023-11-14 15:53:54 +0800 CST

Estado de alternância do React disparado apenas uma vez

  • 772

A tag raiz Appno sandbox se parece com:

import React from 'react'
import { useState, useCallback } from 'react'

export default function App() {
    let [dark, setDark] = useState(true)

    const toggleDark = useCallback(() => {
        setDark(!dark)
    }, []);

    return (
        <main>
            <p onClick={toggleDark}>{dark ? 'dark mode' : 'light mode'}</p>
        </main>
    )
}

Conteúdo da página inicial - “modo escuro”.

Pressione-o, altere para "modo de luz".

Pressione novamente em "modo leve" - ​​nada mudou. Parece que o estado do aplicativo mudou apenas uma vez.

Como forçar a mudança de estado toda vez que clico em <p> ?

Você pode ver a amostra completa no Replit sandbox

javascript

2 respostas

  1. Best Answer

    Você precisa adicionar darkuma dependência ao arquivo useCallback. Caso contrário, a função é armazenada em cache e sempre assume que darkpossui o valor inicial de true:

    const toggleDark = useCallback(() => {
        setDark(!dark)
    }, [dark]); // add dark as dependency here
    • 2

  2. Obrigado a @snaksa pela resposta correta

    • 0

relate perguntas