hola Trabajando con reaccionar y me encontré con un problema desconcertante.
import { useState } from "react"; function useTheme() { const [themeName, setThemeName] = useState("dark"); return [themeName, setThemeName]; } function Other() { const [themeName, setThemeName] = useTheme(); return <div>{themeName}</div>; } function ThemeSwitcher() { const [themeName, setThemeName] = useTheme(); return ( <> <button onClick={() => { themeName == "dark" ? setThemeName("light") : setThemeName("dark"); }} > {"BUTTON"} </button> {themeName} </> ); } function App() { const [themeName, setPalette] = useTheme(); return ( <div> <ThemeSwitcher /> <Other /> <div>{themeName}</div> </div> ); } export default App;Esta es una versión extremadamente básica de mi problema, eliminé todo lo que se me ocurrió y aún persiste. Tengo una aplicación con un enlace llamado useTheme, que proporciona una función que cambia el nombre de una variable de estado "themeName".
Tengo un componente de botón ThemeSwitcher que, al hacer clic, cambia el nombre del tema entre "oscuro" y "claro".
Al hacer clic en el botón, la variable de estado themeName se actualiza (que estoy seguro, ya que el fragmento {themeName} dentro de ThemeSwitcher se actualiza correctamente). Sin embargo, {themeName} dentro de la aplicación y {themeName} dentro de Other en realidad no se actualizan. No veo la diferencia aquí, y actualmente estoy desconcertado en cuanto a por qué uno se actualizaría y los otros no.
¿Alguna idea de por qué el componente de la aplicación no se vuelve a representar a pesar de que cambia la variable de estado?
Son estados completamente separados. Este:
function useTheme() { const [themeName, setThemeName] = useState("dark"); return [themeName, setThemeName]; } efectivamente no es diferente de usar useState en sí mismo. Entonces su problema es similar a preguntar por qué, aquí:
function Other() { const [themeName, setThemeName] = useState(); return <div>{themeName}</div>; } function ThemeSwitcher() { const [themeName, setThemeName] = useState(); // ... los dos themeNames de tema no están sincronizados, es porque no tienen conexión entre sí.
Para solucionar esto, generalmente hay 2 enfoques que se pueden usar:
function App() { const [themeName, setThemeName] = useTheme(); return ( <div> <ThemeSwitcher {...{ themeName, setThemeName }} /> <Other {...{ themeName, setThemeName }} /> <div>{themeName}</div> </div> ); }