Question

警告，我是新手 REACT开发人员。我来自.NET世界。我参加了为期一周的Pluralsight培训课程，并构建了一些简单的演示应用程序。经过几天的Google搜索并阅读了大量文章，我将发布此问题。我的团队中没有其他REACT开发人员，所以我有些困惑，希望这里的社区能够为我提供帮助吗？

当前在工作中，我正在构建具有多个功能的REACT Web应用程序。该应用程序是一个Web应用程序，用于通过Azure B2C演示OAUTH流。我的应用程序上有多个按钮，用于演示隐式流程，身份验证流程，刷新令牌等。当单击这些按钮中的每个按钮时，用户将被重定向到OAUTH端点进行登录等。因此，用户将被重定向到我的REACT应用之外。为了存储用户在表单上所做的一些选择并保留OAUTH令牌和其他值，我将值存储为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属性中，而不是实际的属性名称中。

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

我认为这就是为什么它显示在localStorage中而不是状态：

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

Answer 2

您要存储哪种对象？他们都是琴弦吗？我认为LocalStorage仅存储字符串。

保存到localStorage时，尝试将代码更改为此：

localStorage.setItem(name, JSON.stringify(value));

，以及从localStorage装回时：

this.state = {
  fieldName1: JSON.parse(localStorage.getItem("fieldName1"))
}

这应该确保更复杂的变量得到正确的存储和恢复。

另外，请确保您的姓名匹配-在您的问题中，状态变量以小写字母开头，但是您正在读取以大写字母开头的项目

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

2 个答案: