Javascript NextJS问题阅读项已在本地存储中

在登录到我的NextJS应用程序时，我正在将一些用户数据保存到本地存储

我试图将其渲染成一个始终显示用户名的小组件。我遇到的问题是，它只是有时显示，有时显示为

null

。。。当我登录时，它似乎显示为null，但当我重新加载页面时，它会工作

这就是我所拥有的

import { useEffect } from 'react';

export default function ProfileDisplay() {
    useEffect(async () => {
        const userName = JSON.parse(localStorage.getItem('profile'));
        console.log(userName);
    }, []);

    return (
        <div>
            {userName}
        </div>
    )
}

从“react”导入{useffect}；
导出默认函数ProfileDisplay（）{
useffect（异步（）=>{
const userName=JSON.parse（localStorage.getItem（'profile'）；
console.log（用户名）；
}, []);
返回(
{userName}
)
}

它最初可能是空的，因为在服务器端没有“localStorage”对象。而且，由于您使用空的依赖项数组调用useffect，因此当用户名更改时，它不会触发。因此，您应该在useEffect之外声明用户名，并将其放入依赖项数组中，以侦听更改

export default function ProfileDisplay() {
  const userName = JSON.parse(localStorage.getItem('profile')); // moved it outside the useEffect 
  useEffect(() => {
    if(userName)
      console.log(userName); // do stuff with username
    
}, [userName]); // it will fire when username changes

return (
    <div>
        {userName}
    </div>
)
}

导出默认函数ProfileDisplay（）{
const userName=JSON.parse（localStorage.getItem（'profile'）；//将其移动到useEffect之外
useffect（（）=>{
如果（用户名）
console.log（userName）；//使用userName执行操作
}，[userName]）；//当用户名更改时将触发
返回(
{userName}
)
}

它最初可能是空的，因为在服务器端没有“localStorage”对象。而且，由于您使用空的依赖项数组调用useffect，因此当用户名更改时，它不会触发。因此，您应该在useEffect之外声明用户名，并将其放入依赖项数组中，以侦听更改

export default function ProfileDisplay() {
  const userName = JSON.parse(localStorage.getItem('profile')); // moved it outside the useEffect 
  useEffect(() => {
    if(userName)
      console.log(userName); // do stuff with username
    
}, [userName]); // it will fire when username changes

return (
    <div>
        {userName}
    </div>
)
}

导出默认函数ProfileDisplay（）{
const userName=JSON.parse（localStorage.getItem（'profile'）；//将其移动到useEffect之外
useffect（（）=>{
如果（用户名）
console.log（userName）；//使用userName执行操作
}，[userName]）；//当用户名更改时将触发
返回(
{userName}
)
}

您可以将

用户名

变量置于状态，并在从

localStorage

检索其值后将其更新到

useffect

中

从'react'导入{useffect，useState}；
导出默认函数ProfileDisplay（）{
const[userName，setUserName]=useState（“”）
useffect（（）=>{
constprofile=JSON.parse（localStorage.getItem（'profile'）；
setUserName（profile）；
}, []);
返回(
{userName}
)
}

您可以将

用户名

变量置于状态，并在从

localStorage

检索其值后将其更新到

useffect

中

从'react'导入{useffect，useState}；
导出默认函数ProfileDisplay（）{
const[userName，setUserName]=useState（“”）
useffect（（）=>{
constprofile=JSON.parse（localStorage.getItem（'profile'）；
setUserName（profile）；
}, []);
返回(
{userName}
)
}

除非我重新加载页面，否则此方法始终设置为null。在什么时候将用户名保存到

localStorage

？当您将

profile

登录到

useffect

中时，它有什么值？用户登录后，我设置一些令牌，然后它点击端点以获取用户信息，然后将其存储到LocalStorages此方法始终设置为null，除非我重新加载页面。在什么时候将用户名保存到

localStorage

？当您将

profile

记录在

useffect

中时，它有什么价值？一旦用户登录，我设置一些令牌，然后它点击端点以获取用户信息，然后将其存储到localstorage