javascript - 如何在反应中从本地存储中设置状态？

Question

我将 SiteData 存储在另一个文件中，我想在用户第一次访问网站时设置此数据，而不是当他/她在网站中进行更改时，我想将其存储在本地存储中，当用户再次访问网站时，我希望他们向他们展示以前的变化。所以我不想从 SiteData 文件中获取数据。我在 componentWillMount 生命周期中这样做。

componentWillMount() {
  localStorage = JSON.parse(localStorage.getItem('SiteData'));
  if (ls === null) {
    this.setState({
      MyData: SiteData
    });
    localStorage.setItem('SiteData',JSON.stringify( this.state.MyData));
  }
  else {
    console.log("ls");
    this.setState({
      MyData: ls
    });
  }
}

我收到此错误：

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

PS：我已正确导出 SiteData（导出默认 SiteData）

标签： javascriptreactjsreact-reduxweb-deployment

Answer 1

猜测一下，您正在绑定一个名称（'localStorage'），但随后引用了一个完全不同的名称（'ls'）。在您提供的代码段中，'ls' 永远不会被绑定，因此将永远是undefined.

这对你更有效吗？

componentWillMount() {
  localStorage = JSON.parse(localStorage.getItem('SiteData'));
  if (localStorage === null) {
    this.setState({
      MyData: SiteData
    });
    localStorage.setItem('SiteData',JSON.stringify( this.state.MyData));
  }
  else {
    console.log("localStorage");
    this.setState({
      MyData: localStorage
    });
  }
}