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

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

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])

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

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

Issue

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

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

以上useEffect每次都运行notes变化，还要挂载。并且在安装时状态等于给定的初始数组useState。所以localStorage设置为该数组。

Solution

解决方案是更改设置状态的方式，如下所示，以便您选择localStroge如果有的话，否则使用您拥有的初始数组：

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"))
);