本地存储值未加载到 React App 中

Question

我是 React 新手，正在关注 Udemy 上提供的视频系列之一（Brad Schiff 为我们其他人提供的 React）。作者提供了用户登录等后台系统。当用户登录时，后端服务器发送 3 个值以响应成功登录：登录令牌、用户名和头像 url（来自 gravatar.com 的虚拟图像）。然后将这些值存储在本地存储中，从那里可以在 UI:

上显示它们

    const response = await axios.post("http://localhost:8080/login", {username, password});

    if (response.data) {
        // if response contains token, set login flag to true
        props.loginFlagHandler(true);

        // save user token, username, avatar in localstorage
        localStorage.setItem("username", response.data.username);
        localStorage.setItem("loginToken", response.data.token);
        localStorage.setItem("avatar", response.data.avatar); }

现在，当我登录并更新 UI 时，从服务器接收的值已成功存储在我浏览器的本地存储中，但它们没有反映在 UI 上。头像图像未加载，应显示用户名的欢迎消息未按预期工作（请参见下面的第一张图片）。欢迎消息应显示为“您好<用户名>，您的供稿是空的”

但是，一旦我点击刷新，头像图像和用户名都会在相关位置按应有的方式显示。（参考第二张图片）。

在这两种情况下，我指的是如下的 localStorage 变量：

<img className="small-header-avatar" src={localStorage.getItem("avatar")} />

并且：

<h2 className="text-center">
  Hello <strong>{localStorage.getItem("username")}</strong>, your feed is empty.
</h2>

我认为这应该是我在这里遗漏的菜鸟东西。不过，提前致谢：

Answer 1

在 React 中，当组件挂载时

状态是负载
UI 打印初始状态
生命周期挂钩 运行（例如useEffect）和更新状态
DOM 重新打印更新状态

如果您不在组件中使用状态，那么您应该按照上述工作流程来更新您的 UI。虽然我不知道你的 props.loginFlagHandler(true) 是做什么的，但我在下面举了一个例子。

const [isDataStored, setIsDataStored] = useState(false)

useEffect(() => {
  const fetchData = async () => {
    const response = await axios.post("http://localhost:8080/login", {username, password});

    if (response.data) {
      // if response contains token, set login flag to true
      props.loginFlagHandler(true);

      // save user token, username, avatar in localstorage
      localStorage.setItem("username", response.data.username);
      localStorage.setItem("loginToken", response.data.token);
      localStorage.setItem("avatar", response.data.avatar);
    }
    setIsDataStored(true)
  }
}, [])

您还可以尝试延迟加载 您的子组件。

Answer 2

那么你应该像这样使用状态。

const [avatar, setAvatar] = useState("");
const [username, setUsername] = useState("");

useEffect(() => {  
      setUsername(localStorage.getItem("username"))
      setAvatar(localStorage.getItem("avatar"))
    
  
})

................
<img className="small-header-avatar" src={avatar} />
And:

<h2 className="text-center">
  Hello <strong>{username}</strong>, your feed is empty.
</h2>

本地存储值未加载到 React App 中

Local Storage values not getting loaded in React App

local-storage

reactjs