反应 useEffect() 钩子不适用于 JSON.parse,JSON.stringify答案

【问题标题】：React useEffect() hook not working with JSON.parse,JSON.stringify反应 useEffect() 钩子不适用于 JSON.parse,JSON.stringify
【发布时间】：2022-11-12 12:05:14
【问题描述】：

我已经查看了这个问题的 xy 答案，没有一个有帮助。我正在创建一个简单的反应应用程序来为自己写笔记。写完笔记后，我希望即使刷新页面后也能保存它。为此，我想使用useEffect 钩子，但它没有这样做，是的，它是从标题中的反应导入的，谢谢您的任何建议！

useEffect(() =>{
    const savedNotes = JSON.parse(localStorage.getItem("react-notes-app-data"));

    if(savedNotes) {
        setNotes(savedNotes);
    }
}, []);


useEffect(() => {
    localStorage.setItem("react-notes-app-data", JSON.stringify(notes));

}, [notes]);

我在刷新页面时尝试使用 JSON.parse 和 JSON.stringify 来检索数据（我的笔记）。

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

对我有用：（随着注释的更新，它设置了东西）

function App() {
  const [notes, setNotes] = useState([]);
  useEffect(() => {
    const savedNotes = JSON.parse(localStorage.getItem("react-notes-app-data"));

    if (savedNotes) {
      setNotes(savedNotes);
    }
  }, []);

  useEffect(() => {
    localStorage.setItem("react-notes-app-data", JSON.stringify(notes));
  }, [notes]);

  const increase = () => {
    setNotes(['dwd', 'dwd', 'dwd'])
  }
  return (
    <div>
      123
      {notes && notes.map((el) => <div> {el} </div>)}
      <button onClick={increase}>123</button>
    </div>
  );
}

export default App;

【讨论】：

【解决方案2】：

假设您的 notes 是一个数组。您应该检查数组中是否有任何项目。 useEffect 在组件渲染时运行，此时notes 的状态仍然是初始的任何空数组。所以 localStorage 将 setItem 与空数组。

useEffect(() => {
  if (notes.length < 1) return;
  localStorage.setItem("react-notes-app-data", JSON.stringify(notes));
}, [notes]);

【讨论】：