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
    });
  }
}

我遇到此错误：

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

P.S。：我已正确导出SiteData（导出默认SiteData）

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
    });
  }
}

Answer 2

我刚刚意识到我有一个完全不同的问题，因为我试图将数据保存在依赖于其他组件的本地存储中。因此，本地存储忽略了这些依赖关系，由于当我在状态下使用本地存储数据时出现此错误。通过在SiteData中进行少量更改来解决此问题。谢谢大家的帮助。

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

2 个答案: