NextJS 中的 LocalStorage , useEffect 问题

Posted 2023-03-17

【中文标题】NextJS 中的 LocalStorage , useEffect 问题

【英文标题】：LocalStorage in NextJS , useEffect problem

【发布时间】：2021-11-13 15:23:59

【问题描述】：

我在 localStorage 中获取和设置数据时遇到问题，我使用 NextJs，然后我一开始无法使用 localStorage。

我尝试使用 useEffect 解决，但我有一个无限循环，我知道它是针对依赖项的。我不知道使用 useCallback 或 useMemo 或 useRef 解决问题的最佳方法。

我粘贴了部分有问题的代码。

      const [ meetings, setMeetings] = useState([]) // meetings= [meeting1,meeting2]
      
      useEffect(() => 

       if(localStorage.getItem('meetings') === undefined || 
         localStorage.getItem('meetings') === '' ||
         localStorage.getItem('meetings') === null
         )
          localStorage.setItem('meetings', JSON.stringify([]))         
         


       if( JSON.parse(localStorage.getItem('meetings')).length === 0)
            
             const meetingsInLocalStorage  = JSON.parse(localStorage.getItem('meetings'))
             setMeetings([...meetings, meetingsInLocalStorage])

       
       ,[meetings])

【问题讨论】：

是否有理由需要在依赖项数组中包含 meetings？

【参考方案1】：

您可以将此条件缩短为

localStorage.getItem('meetings') === undefined ||  localStorage.getItem('meetings') === '' || localStorage.getItem('meetings') === null

这个

!localStorage.getItem('meetings')

---

这个sn-p的代码没有意义，因为如果localStorage中的数据是空的

if (JSON.parse(localStorage.getItem('meetings')).length === 0) 

这也是空的

const meetingsInLocalStorage = JSON.parse(localStorage.getItem("meetings"));

当你传播会议数组时，你不会传播meetingsInLocalStorage，而是继续将空数组推入meetings状态。

setMeetings([...meetings, meetingsInLocalStorage]);

您的数据将类似于[ [], [], ...]，并且会议变量发生变化，因此useEffect 再次运行导致无限循环。

终于

---

如果localStorage 中有一些会议状态，我假设您想更新会议状态

所以你的支票应该是

if (JSON.parse(localStorage.getItem("meetings")).length > 0) 
  const meetingsInLocalStorage = JSON.parse(localStorage.getItem("meetings"));
  setMeetings([...meetings, ...meetingsInLocalStorage]);