reactjs NextJS localStorage.getItem()方法在组件上不起作用？

vc9ivgsu 于 2022-11-04 发布在 React

关注(0)|答案(2)|浏览(180)

在我的nextjs-app中，我想使用localstorage，在我的应用程序中存储一些值。
所以在pages-文件夹中我有一个[slug].tsx-文件，我在其中执行以下操作：

export default function Page({ data}) {

   useEffect(() => {
     const page = {
       title: data.page.title,
       subtitle: data.page.subtitle,
       slug: data.page.slug,
     }

     localStorage.setItem("page", JSON.stringify(page))
  })

  return ( ... some html....)
}

这基本上存储了当前路线的标题、副标题和信息块。
现在，在我的components-文件夹中，我有一个Nav.tsx-文件，我在这里做：

const Nav= () => {
  const [pageData, setPageData] = useState()

  useEffect(() => {
     const current = JSON.parse(localStoraget.getItem('page'))
     if(current){
        setPageData(current)
     }
  },[])

  return(...some html)

 }

到目前为止，setItem可以正常工作，并且在谷歌检查器的application-标签中，我可以看到每次渲染新的路由/页面时，键值都会发生变化，但是getItem-总是返回相同的结果，例如键值根本没有变化。我做错了什么？是不是因为Nav组件只渲染了一次？
有人能帮我吗？

reactjs

来源：https://stackoverflow.com/questions/74289826/nextjs-localstorage-getitem-method-not-working-on-components

2条答案

按热度按时间

esyap4oy1#

您有一个拼写错误，来自：

localStoraget.getItem('page')

至：

localStorage.getItem('page')

我认为您的问题也福尔斯localstorage，应该与async/await一起使用，因此可以尝试类似以下的操作：

const Nav= () => {
  const [pageData, setPageData] = useState()

  useEffect(() => {
    async function settingData() {
      const current = await JSON.parse(localStorage.getItem('page'))
      if(current)setPageData(current)
    }
    settingData()
  },[])

  return(...some html)
}

赞(0）回复(0）举报 2022-11-04

35g0bw712#

注意：您应避免使用localStorage在您的应用程序上共享状态。React提供了使用ContextAPI执行此操作的好方法，您也可以使用其他库，如Redux/MobX/Recoil。

在呈现<Nav>组件（并且运行useEffect）时，localStorage可能还没有设置键值。
如果你真的想使用localStorage（但我建议不要使用它），你可以创建一个超时，在一段时间后执行，并将尝试再次获得该值。

let localStorageTimer = null;

const Nav = () => {
  const [pageData, setPageData] = useState()

  useEffect(() => {
    const getLocalStorageItems = () => {
      const current = JSON.parse(localStorage.getItem('page'))
      if (!current) {
        localStorageTimer = setTimeout(() => getLocalStorageItems, 1000);
      } else {
        clearTimeout(localStorageTimer)
        setPageData(current)
      }
    }

    localStorageTimer = setTimeout(() => getLocalStorageItems, 1000);

    return () => clearTimeout(localStorageTimer)
  }, []);

  return (.. your JSX code)
}

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs NextJS localStorage.getItem()方法在组件上不起作用？

2条答案

相关问题

热门标签

最新问答