这可能是一个新手问题,但我在使用 useEffect()
钩子时遇到了一些麻烦。我有一个记录笔记应用程序,并希望使数据持久化。我使用了两个 useEffect
:一个用于当页面首次刷新/加载时,另一个用于当我向我的应用程序添加新笔记时。
我放了一些日志来检查正在发生什么:
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])
这种行为有点奇怪,因为当页面刷新时,新数据会出现在日志中,但随后消失,只保留硬编码的数据:
它还进行了比我预期更多的调用。对于这里发生了什么,您有什么想法吗?