本地存储值未在 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中，当组件挂载时

1. 状态正在加载
2. UI 打印初始状态
3. 生命周期挂钩运行（例如useEffect）并更新状态
4. 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>