Как в реакте правильно доставать данные из localstorage?

Question

[rabobas]

выдает ошибку: Objects are not valid as a React child (found: object with keys {type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

let storage = JSON.parse(localStorage.getItem('components'))

function App() {

  let [array,setArray] = useState(storage)

  function addComponent() {
    let comp = <div key={Math.floor(Math.random() * 10000)}>777</div>
    let copy = [...array || [],comp]
    setArray(copy)
    
  }
  localStorage.setItem('components' ,JSON.stringify(array))

  return (
    <>
    <button onClick={addComponent}>click</button>
    <div>{array}</div>
    </>
  )
}

export default App

Answer 1

[Aleksey Solovyev]

JSON.parse возвращает простые объекты, которые React не может отрендерить.
Вместо хранения React-элементов храните минимальные данные, необходимые для генерации компонентов. Генерируйте элементы на основе этих данных при рендере.

Код от AI:

import React from 'react';

const initialData = JSON.parse(localStorage.getItem('components')) || [];

export function App() {
  const [componentsData, setComponentsData] = React.useState(initialData);

  React.useEffect(() => {
    localStorage.setItem('components', JSON.stringify(componentsData));
  }, [componentsData]);

  function addComponent() {
    setComponentsData(prev => [
      ...prev,
      { id: Math.random().toString(36).slice(2), content: Math.floor(Math.random() * 100) }
    ]);
  }

  const components = componentsData.map(item => (
    <div key={item.id}>{item.content}</div>
  ));

  return (
    <>
      <button onClick={addComponent}>click</button>
      <div>{components}</div>
    </>
  );
}

ps и если хотите разобраться как работать с чем-то, то посмотри как это написано у других - useLocalStorage