NextJS 中的 LocalStorage , useEffect 问题答案

【问题标题】：LocalStorage in NextJS , useEffect problemNextJS 中的 LocalStorage , useEffect 问题
【发布时间】：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？

标签： reactjs next.js local-storage use-effect

【解决方案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]);
}

【讨论】：