Question

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

  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序列化会影响性能。

刷新页面后保留状态

1 个答案: