刷新页面后保持状态

Question

• 我正在努力学习自己的反应。
• 当我点击收藏按钮时，心形符号会改变颜色。
• 但是当我刷新页面时它消失了。
• 所以我研究并找到了以下链接 How to maintain state after a page refresh in React.js?
• 现在实施后，我可以在开发人员工具应用程序选项卡中看到本地存储。
• 但在我刷新后颜色仍然没有保留。
• 当我调试时，我在 getInitialState 中发现没有任何打印会出现问题
• 你能告诉我如何解决它吗？
• 以便将来我自己修复它。
• 在下面提供我的相关代码 sn-p 和沙箱。
• 我所有的代码都在 RecipeReviewCard.js 中

https://codesandbox.io/s/xrp56z04yq

  getInitialState = () => {
    var addFavirote = localStorage.getItem("AddFavirote") || 1;
    console.log("getInitialState--->", addFavirote);

    return {
      addFavirote: addFavirote
    };

    //this.setState(state => ({ belowExpanded: !state.belowExpanded }));
  };


<FavoriteIcon
              style={{ display: this.state.addFavirote ? "none" : "" }}
              onClick={e => {
                console.log("favoriteEvent---.", e);
                console.log(
                  "this.state.addFavirote---.",
                  this.state.addFavirote
                );

                localStorage.setItem("AddFavirote", !this.state.addFavirote);
                this.setState({ addFavirote: !this.state.addFavirote });

                console.log(
                  "!this.state.addFavirote---.",
                  !this.state.addFavirote
                );

                this.props.onAddBenchmark(this.props);
              }}
            />

Answer 1

从LocalStorage syntax 文档中，您需要将addFavorite 序列化为字符串以设置为本地存储。在componentDidMount 上，当从localStorage 中检索到值时，您可以将其解析回getInitialState 中的原始内容。

例如，你可以

localStorage.setItem(JSON.stringify(!this.state.addFavorite)) //ie "true" || "false"

然后把它拿回来

getInitialState = () => {
  let fav = localStorage.getItem('AddFavorite');
  let addFavorite = JSON.parse(fav || "true");
  this.setState({ addFavorite });
}

PS：我建议在componentWillUnmount 中设置localStorage，如果它不会破坏的话。设置本地存储和 JSON 序列化会影响性能。