Quiero crear un enlace personalizado para almacenar algún valor en localStorage y tener acceso a este valor desde cualquier componente en mi aplicación React. También quiero hacer que React App vuelva a renderizar automáticamente el componente que usa el valor de localStorage y muestre un nuevo valor.
Entonces, creé un gancho personalizado:
export function useLocalStorageState(key, defaultState) { const [state, setState] = useState(() => { const storedState = localStorage.getItem(key); if (storedState) { return JSON.parse(storedState); } return defaultState; }); const setLocalStorageState = useCallback( (newState) => { const changed = state !== newState; if (!changed) { return; } setState(newState); if (newState === null) { localStorage.removeItem(key); } else { localStorage.setItem(key, JSON.stringify(newState)); } }, [state, key] ); return [state, setLocalStorageState]; }Tengo el encabezado del componente React, donde tengo una selección desplegable con algunos valores:
const Header = () => { const [numFormat, setNumFormat] = useLocalStorageState('numFormat'); const handleChange = (event) => { setNumFormat(event.target.value); }; return ( <FormControl sx={{ m: 1, minWidth: 120 }} size="small"> <Select value={numFormat || 'myFormat'} label="Num format" onChange={handleChange} > <MenuItem value="decimal">Decimal</MenuItem> <MenuItem value="fractional">Fraction</MenuItem> <MenuItem value="impliedProbability">Probability %</MenuItem> </Select> </FormControl> ); };Y otro componente de React que quiero volver a renderizar cada vez que cambio el numFormat en Header:
const FormSettings = () => { const [numFormat] = useLocalStorageState('numFormat'); useEffect(() => { console.log(numFormat); }, [numFormat]); return ( <h1>{numFormat}</h1> )}Pero hay un problema. Cuando cambio el numFormat en el encabezado, nada cambia en FormSettings.
Creo que se debe a que las instancias de enlace personalizadas son diferentes en ambos componentes. Ha llamado a su gancho personalizado en ambos componentes y ambos ganchos tienen su propio estado. Cuando cambias de estado en el primer gancho, no afectará al segundo gancho.
Debe pasar numFormat del componente Header al componente FormSettings a través de accesorios y usar ese valor en lugar de instanciar un nuevo enlace.
Si no puede pasar numFormat de Header a FormSettings , eleve el estado a un padre común de ambos o intente usar el contexto React