0
130
ViewsLos datos de almacenamiento local y estatal son diferentes después de la actualización
Así que tengo un problema con el almacenamiento estatal y local. Para ser exactos, cada vez que anido los objetos dentro de themes.dark y themes.light, los resultados en el bloque de código dinámico difieren después de la actualización, aunque los datos de almacenamiento local sean correctos.
import { useState, useEffect } from "react"; import store from "store2"; import "./styles.css"; const themes = { dark: { theme: "dark" }, light: { theme: "light" } }; export default function App() { const defaultDarkTheme = window.matchMedia("(prefers-color-scheme:dark)") .matches ? themes.dark : themes.light; const [theme, setTheme] = useState(store.get("theme") || defaultDarkTheme); useEffect(() => { store.set("theme", theme); }, [theme]); return ( <> <div className="App" onClick={() => theme === themes.dark ? setTheme(themes.light) : setTheme(themes.dark) } > {JSON.stringify(theme)} </div> {theme === themes.dark ? JSON.stringify(themes.dark) : JSON.stringify(themes.light)} </> ); }Antes de actualizar :
Después de actualizar :
Es bastante problemático ya que después de actualizar, en lugar de generar el contenido para el modo oscuro, genera el contenido para el modo claro.
2 answers
Answer question0
Creo que es por tu gancho useEffect .
useEffect(() => { store.set("theme", theme); }, [theme]); Creo que su useEffect se ejecuta antes de obtener los datos de localStorage. No estoy seguro de que esto sea solo una corazonada.
0
Su problema no es con el estado o el almacenamiento. Verá su problema si agrega la siguiente línea después de declarar su estado y actualiza la página después de cambiarla a oscura. console.log(theme, themes.dark, theme === themes.dark)
Javascript solo decide que dos objetos son iguales si se refieren exactamente al mismo objeto. Sin embargo, cuando obtiene su objeto de tema de la tienda, no es exactamente el mismo objeto que el objeto themes.dark que definió anteriormente.
Hay varias formas de manejar un escenario como este, pero creo que sería más simple si compara algunas propiedades de cadena de los objetos, por ejemplo,
theme.theme === themes.dark.theme ? JSON.stringify(themes.dark) : JSON.stringify(themes.light) alternativamente, puede definir una propiedad de identificador único en su objeto de tema que puede usar para comparar en lugar de theme.theme o si realmente desea comparar los objetos, puede hacer algo como
JSON.stringify(theme) === JSON.stringify(themes.dark) ? JSON.stringify(themes.dark) : JSON.stringify(themes.light)