сохранение состояния после обновления страницы

Question

• Я пытаюсь научиться реагировать сам.
• когда я нажимаю кнопку избранного, символ сердца меняет цвет.
• , но когда я обновляю страницу, она исчезает.
• поэтому я исследовал и нашел следующую ссылку Как сохранить состояние после обновления страницы в React.js?
• после реализации теперь я могу видеть локальное хранилище ввкладка приложения инструментов разработчика.
• , но после обновления цвет не сохраняется.
• при отладке я обнаружил, что в getInitialState ничего не печатается, это будет проблемой
• подскажите, как это исправить.
• так что в будущем я сам исправлю.
• предоставив мой соответствующий фрагмент кода и песочницу ниже.
• весь мой код находится в 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 синтаксис вам нужно будет сериализовать 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: я рекомендую установить localStorage в componentWillUnmount, если это не сломает вещи.Настройка локального хранилища и JSON-сериализации повлияет на производительность.