Tengo un menú desplegable simple. Actualiza el estado desde el almacenamiento local y el contexto. El contexto se actualiza y puedo usarlo en todas partes de la página, excepto en el valor de selección.
Este menú desplegable tiene un valor predeterminado. (HU,EN,,DE,HR) No se actualiza aunque la actualización de estado
Me quedo 'HU'. Aunque el estado cambió. La página otras partes funcionan correctamente
Yo uso ganchos. Gracias
Aquí está mi caja de códigos:
https://codesandbox.io/s/eager-river-t45b3r?file=/src/LanguageDropDown.js
IdiomaDropDown.js
import React, { useState, useContext } from "react"; import GlobalContext from "./GlobalContext"; import classes from "./LanguageDropDown.module.css"; export default function LanguageDropDown() { const { language, setLanguage } = useContext(GlobalContext); console.log(`This is the language state from context: ${language}`); return ( <div className={classes.div}> <select className={classes.languageDropDown} value={language} onChange={(e) => { const selectedLanguage = e.target.value; console.log(`this is the selected: ${selectedLanguage}`); setLanguage(selectedLanguage); localStorage.setItem("language", JSON.stringify(selectedLanguage)); }} > <option value="hu">HU</option> <option value="en">EN</option> <option value="de">DE</option> <option value="hr">HR</option> </select> <h1>Here the good result:{language}</h1> </div> ); }ContextWrapper.js
import React, { useState, useEffect } from "react"; import GlobalContext from "./GlobalContext"; export default function ContextWrapper(props) { const [language, setLanguage] = useState(""); useEffect(() => { const storageLanguage = localStorage.getItem("language"); console.log(`this is the storagelanguage: ${storageLanguage}`); if (storageLanguage) { function setLanguageData() { setLanguage(storageLanguage); } setLanguageData(); } }, [language]); return ( <GlobalContext.Provider value={{ language, setLanguage, }} > {props.children} </GlobalContext.Provider> ); }Intente actualizar su useEffect a lo siguiente:
useEffect(() => { const storageLanguage = localStorage.getItem("language"); console.log(`this is the storagelanguage: ${storageLanguage}`); if (storageLanguage) { function setLanguageData() { setLanguage(storageLanguage); } setLanguageData(); } }, []); //Remove the language from here. Agregar [language] a la matriz de dependencias ejecuta useEffect cada vez que cambia el idioma en el menú desplegable. Esto a su vez establece el valor del menú desplegable nuevamente.
Mantenga la matriz de dependencia vacía en useEffect , permita que useEffect ejecute solo una vez, eso resuelve el problema.
La respuesta proporcionada anteriormente no pareció resolver el problema para mí (verificado yendo a la zona de pruebas del código proporcionado y aún no funciona después de hacer ese cambio).
El problema está en la forma en que está guardando y analizando el valor. Usted está JSON.stringify . encadenando el valor al almacenarlo, pero no está JSON. analizándolo cuando lo recupera de JSON.parse . Consulte este entorno limitado de código para encontrar una solución: https://codesandbox.io/s/recursing-tree-7sn98k?file=/src/ContextWrapper.js
Alternativamente, tampoco podría JSON.stringify el valor al almacenarlo, pero teniendo en cuenta que los valores de almacenamiento local deben ser cadenas (o serán .toString() 'd de lo contrario) creo que el enfoque de encadenar los valores en el camino es más tolerante a fallas.