Soy nuevo para reaccionar, así que desnudo conmigo.
Tengo un conjunto de datos en el almacenamiento local antes de iniciar mi aplicación de reacción, y quiero recorrer dinámicamente el almacenamiento local y mostrar los datos.
Actualmente lo tengo configurado explícitamente:
import React from 'react'; const App = () => { return ( <div> <h1>Hello World</h1> <ul> <li>locale: {localStorage.getItem('locale')}</li> <li>pubKey: {localStorage.getItem('pubKey')}</li> <li>version: {localStorage.getItem('version')}</li> <li>dist: {localStorage.getItem('dist')}</li> </ul> </div> ); } export default App;pero no quiero hacer definiciones explícitas, sino recorrer los datos de almacenamiento local de esta forma dinámica.
las soluciones elegantes y complejas también son siempre bienvenidas.
ACTUALIZAR::
He intentado:
en html:
<script> window.localStorage.setItem('app:data:persist',JSON.stringify({"version":"0.0.1","dist":"shard","locale":"en_US","pubKey":"6asd68d68ddd6saadd79asd7das79ads9"}));</script></head> <body> const App = () => { const localStorageData = JSON.parse(window.localStorage.getItem('app:data:persist')); return ( <div> <h1>Hello World</h1> <ul> {localStorageData.map((data,key) => { return ( <li>{key} : {data[key]}</li> ) })}; </ul> </div> ); }pero no puedo obtener el valor de la entrada con la clave correctamente?
No está claro cómo manejar esto de forma dinámica y con definiciones explícitas . Por favor, aclare. Si usa Redux, puede usar https://github.com/rt2zz/redux-persist . Cargue los datos almacenados en caché en la tienda redux desde el motor de la tienda cuando se inicialice la aplicación.
Si no desea usar redux, solo use una clave de caché para todos los datos almacenados en caché de la aplicación.
Además, considere usar el contexto de React para almacenar los datos almacenados en caché, de modo que los componentes anidados puedan acceder a los datos almacenados en caché de manera conveniente.
P.ej
localStorage.setItem('myapp:1.0.0:persist', JSON.stringify({ list, ... })); const data = JSON.parse(localStorage.getItem('myapp:1.0.0:persist')); data.list.map(...)