Блог

У меня есть элемент react, testReactElement и я хочу отобразить его на экране, и даже после того, как пользователь закроет вкладку и снова откроет ее, они должны обнаружить, что те же данные все еще отображаются, поэтому я помещаю их в localStorage, и чтобы добавить элемент react в localStorage, я сначала должен его упорядочить, используя JSON.stringify() , и этоуспешно сохраняется localstorage , когда я хочу извлечь его из локального хранилища и отобразить, я использую 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;
 

Проблема в том, что JSON.parse() возвращает объект javascript, который выглядит похоже, но не совпадает с элементом react, который я изначально добавил в localStorage, и во вновь возвращенном объекте отсутствуют некоторые ключи, поэтому react не распознает его как элемент react и выдает следующую ошибку 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.
Когда я попытался сравнить исходный элемент react со строковым, я обнаружил, что после строковой обработки в элементе react отсутствует символьный ключ ‘$$typeof’, и это то, что заставляет react не распознавать его как элемент react и видеть его только как обычный объект JS, поэтому возникает ошибкаошибка. После некоторого поиска в Google я обнаружил, что это происходит потому, что когда мы пытаемся использовать JSON.stringify(символ), он возвращается undefined .
Итак, как я могу вставить элемент react, localstorage а затем вернуть его обратно в том виде, в котором я его изначально ввел, чтобы я мог отобразить его на экране?

Вы должны использовать useEffect при попытке получить элементы из локального хранилища, а не делать это в jsx.
Живая демонстрация

 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;