javascript - 来自本地存储的 REACT 状态未加载

Question

公平警告，我是新手 REACT 开发人员。我来自 .NET 世界。我参加了为期一周的 Pluralsight 培训类(class)，并构建了一些简单的演示应用程序。经过几天的谷歌搜索和阅读大量文章后，我发布了这个问题。我的团队中没有任何其他 REACT 开发人员，所以我有点困惑，希望这里的社区能帮助我吗？

目前在工作中，我正在构建一个具有多项功能的 REACT 网络应用程序。该应用程序是一个 Web 应用程序，用于演示使用 Azure B2C 的 OAUTH 流程。我的应用程序上有多个按钮，用于演示隐式流程、身份验证流程、刷新 token 等。单击这些按钮中的每一个时，用户将被重定向到 OAUTH 端点以进行登录等。因此，用户将被重定向离开我的 REACT 应用程序。为了存储用户在表单上所做的一些选择并保留 OAUTH token 和其他值，我将值存储在 REACT 状态。

this.state = {
  fieldName1: localStorage.getItem("FieldName1"),
  fieldName2: localStorage.getItem("FieldName2"),
  fieldName3: localStorage.getItem("FieldName3"),
  fieldName4: localStorage.getItem("FieldName4"),
  fieldName5: localStorage.getItem("FieldName5"),
};

正如您可以想象的那样，一旦重定向发生在我的 REACT 应用之外，状态值就会丢失。所以我研究了使用 cookie。然后我看到了一些关于使用本地存储的文章。这就是我目前在我的代码中所拥有的。我的问题 当用户被重定向回我的应用程序时，我无法从状态重新加载值。当我在 Chrome 中运行该应用程序并查看开发工具面板并查看我的本地存储时，我的所有五个值都存在。但是，我的所有五个状态值都未从本地存储中重新加载。在我的应用程序中，我最终多次调用“setState”，因为用户单击不同的按钮并发生不同的“事件”。 I read this thread然后将我所有的 setState 调用合并到一个函数中。

updateStateValuesAndLocalStorage(name, value) {
this.setState(
  {
    name: value
  },
  updatedState => {
    console.log("updatedState: ", updatedState);
  }
);
localStorage.setItem(name, value);
}

我也是read this thread所以我知道异步的事情可能会导致我的问题。但是作为一个新手，我正在努力解决这个问题。非常感谢这里的任何帮助或指导!

Answer 1

看起来它们总是存储在 updateStateValuesAndLocalStorage 函数中的名称属性中，而不是实际的属性名称中。

应该尝试使用 [name]: value 而不是 name: value。

我认为这就是它出现在 localStorage 而不是状态的原因:

localStorage 可以将 String 变量作为参数，但 Object 将不带 [] 的属性名称中的变量名称视为字符串。