Tengo un elemento de reacción testReactElement y quiero mostrarlo en la pantalla e incluso después de que el usuario cierre la pestaña y la vuelva a abrir, deberían encontrar los mismos datos que aún se muestran, así que lo puse en el almacenamiento local y agregué un elemento de reacción. a localStorage Primero debo encadenarlo usando JSON.stringify() , y se almacena correctamente en localstorage , cuando quiero recuperarlo del almacenamiento local y mostrarlo, uso JSON.parse() .
import './App.css'; let testReactElement = <div> <h1>this is the title of the react element</h1> <p>This is the content of the react element</p> </div> localStorage.setItem('element',JSON.stringify(testReactElement)) function App() { return ( <div className="App"> {JSON.parse(localStorage.getItem('element'))} </div> ); } export default App; El problema es que JSON.parse() devuelve un objeto javascript que se ve similar pero no igual al elemento de reacción que agregué inicialmente a localStorage, y al objeto recién devuelto le faltan algunas claves, por lo que reaccionar no lo reconoce como un reacciona y arroja el siguiente error Error: Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead. Cuando traté de comparar el elemento de reacción original con el de cadena, descubrí que después de la cadena, al elemento de reacción le falta la clave del símbolo '$$typeof' y es lo que hace que la reacción no lo reconozca como un elemento de reacción y solo vea como un objeto JS regular, por lo tanto arroja un error. Después de buscar en Google, descubrí que esto sucede porque cuando intentamos JSON.stringify (símbolo) devuelve undefined . Entonces, ¿cómo puedo poner un elemento de reacción en localstorage y luego recuperarlo como lo ingresé inicialmente para poder mostrarlo en la pantalla?
Debe utilizar useEffect cuando intente obtener los elementos del almacenamiento local y no hacerlo en jsx.
Demo en vivo
import { useEffect, useState } from "react"; import "./styles.css"; let testReactElement = "this is the title of the react element"; function App() { const [data, setData] = useState(testReactElement); useEffect(() => { const data = localStorage.getItem("data"); if (data) { setData(JSON.parse(data)); } }, []); useEffect(() => { localStorage.setItem("data", JSON.stringify(data)); }); return <div>{data}</div>; } export default App;