本地存储在NextJS中的使用效果问题 [英] LocalStorage in NextJS , useEffect problem

问题描述

我在本地存储中获取和设置数据时遇到问题，如果我使用NextJ，则最初无法使用本地存储。

我尝试使用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])

推荐答案

您可以将此条件缩短为

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

这个

!localStorage.getItem('meetings')

---

这段代码没有意义，因为如果本地存储中的数据为空

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

这也将为空

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

当您展开会议数组时，您并没有展开meetingsInLocalStorage，而是一直将空数组推入meetings状态。

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

您的数据将类似[ [], [], ...]，并且Meetings变量更改，因此useEffect再次运行，导致无限循环。

最终

---

我假设您希望更新localStorage中的会议状态

所以您的支票应该是

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

这篇关于本地存储在NextJS中的使用效果问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！