React，页面刷新后使用 useEffect 丢失 localStorage 中保存的数据

Question

这可能是一个菜鸟问题，但我在useEffect()钩子方面遇到了一些麻烦。我有一个记笔记应用程序，我想让数据持久保存。我使用 2useEffect秒：一个用于第一次刷新/加载页面时，另一个用于当我向应用程序添加新注释时。

我放置了一些日志来检查发生了什么：

const [notes, setNotes] = useState([
  {
  noteId: nanoid(),
  text: 'This is my 1st note!',
  date: '30/07/2022'
  },
  {
    noteId: nanoid(),
    text: 'This is my 2nd note!',
    date: '30/07/2022'
  }
])

// 1st time the app runs
useEffect(() => {
  const savedNotes = JSON.parse(localStorage.getItem('react-notes'))
  console.log('refresh page call:',savedNotes)

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

//every time a new note is added
useEffect(() => {
  localStorage.setItem('react-notes', JSON.stringify(notes));
  console.log('new note call:', notes)
}, [notes])

这种行为有点奇怪，因为刷新页面时，新数据出现在日志中，但随后消失，仅保留硬编码数据：

它还拨打了比我预期更多的电话。对这里发生的事情有什么想法吗？

Answer 1

问题

该问题是由以下原因useEffect以及您最初设置状态的方式引起的：

useEffect(() => {
  localStorage.setItem('react-notes', JSON.stringify(notes));
  console.log('new note call:', notes)
}, [notes])

上面useEffect每次notes变化时都会运行，而且还在挂载上。并且在挂载时，状态等于赋予 的初始数组useState。所以localStorage被设置为该数组。

解决方案

解决方案是更改设置状态的方式，如下所示，因此您可以选择localStrogeif 中有内容，否则使用您拥有的初始数组：

const [notes, setNotes] = useState(
  !localStorage.getItem("react-notes")
    ? [
        {
          noteId: nanoid(),
          text: "This is my 1st note!",
          date: "30/07/2022",
        },
        {
          noteId: nanoid(),
          text: "This is my 2nd note!",
          date: "30/07/2022",
        },
      ]
    : JSON.parse(localStorage.getItem("react-notes"))
);