Tengo 2 componentes hermanos hogar e historial donde hogar tiene la siguiente función
//home function handledata() { const key = uuidv4(); localStorage.setItem(key, JSON.stringify(formdata)); }Necesito acceder al almacenamiento local en el componente de historial de hermanos, entonces, ¿cómo accedo a esta variable clave allí?
//history const [items, setItems] = React.useState([]); const handledata = () => { localStorage.getItem(key); };Código completo de ambos archivos https://github.com/Megahedron69/testrep
Su mejor opción es decouple el almacenamiento local de ambos componentes y convertirlo en un módulo o una clase separados. Luego puede acceder a él en ambos archivos.
pseudocódigo
class LocalStorage { setItem(key, item) { ... } getItem(key) { ... } }Si no quiere hacer eso, levantar el estado es la mejor solución posible cuando desea compartir datos entre componentes hermanos.
parent un componente principal de home e history y use localstorage allí.
No necesita la función handledata en ese caso. Simplemente puede acceder a localStorage sin él:
const data = localStorage.getItem(key); // use this data any way you want in the componentFormas de compartir datos entre estados:
No se recomienda el almacenamiento local para estas cosas y, en su caso, el estado global no tiene sentido. El estado principal es mejor en su caso.
Hay varias cosas que puedes hacer: