Как предотвратить изменение состояния в React после обновления страницы / изменения просмотра? - PullRequest
Новая
       27

Как предотвратить изменение состояния в React после обновления страницы / изменения просмотра?

0 голосов
/ 06 июня 2019

Мой обработчик события onClick добавляет / удаляет идентификатор в поле базы данных и меняет цвет кнопки в соответствии с состоянием переключения true / false. Пока обновление данных работает правильно, состояние цвета сбрасывается при обновлении страницы / изменении просмотра. Я предполагаю, что состояние должно быть передано (в данном случае это отношение дочерний элемент к родителю) с помощью функции обратного вызова, но я не уверен.

Я думал, что необходимо будет сохранить текущее состояние в LocalStorage, но это не решило проблему. Хотя значения LocalStorage 'true' и 'false' оставались в своем состоянии (как показано в консоли), цвет кнопки все равно сбрасывался при обновлении страницы.

Я приложил разделы кода, которые могут быть важны для оценки проблемы: 

// initialization of toggle state
let toggleClick = false;

...

 this.state = {
      fav: props.favorite
    };
    this.toggleClass = this.toggleClass.bind(this);
  }

...

componentDidUpdate(prevProps) {
    if (this.props.favorite !== prevProps.favorite) {
      this.setState({
        fav: this.props.favorite
      });
    }
  }

  toggleClass() {
    toggleClick = true;
    if (!this.state.fav) {
      this.addId(this.props.movie._id);
    } else {
      this.removeId();
    }
  }

...

<span
  onClick={() => this.toggleClass()}
  className={this.state.fav ? "favme active" : "favme"}
>&#x2605;</span>

1 Ответ

0 голосов
/ 06 июня 2019

Я столкнулся с той же проблемой, что и мои приложения React.Для этого я всегда использую componentDidMount, потому что он вызывается сразу после рендера.Но если вы вызовете функцию setState, она автоматически вызовет рендер, так что ваши изменения появятся.Если страница обновится, состояние будет сброшено к значению по умолчанию.Итак, лучший способ добиться этого, например: 

componentDidMount() {
   const getDbAnswer = //fetch a signal from the db
   if (getDBAnswer === true) {
     this.setState({ fav: true })
   else
     this.setState({ fav: false })
}

Вы можете даже установить переменную с помощью localStorage.Помните, что localStorage принимает только string значения, но не boolean. 

componentDidMount() {
  const getDbAnswer = //fetch a signal from the db
  if (getDBAnswer === true)
    localStorage.setItem("fav", "true");
  else
    localStorage.setItem("fav", "false");
}

И тогда вы можете просто использовать его так: 

<div className={localStorage.getItem("fav") === "true" ? "favme active" : "favme"}>
...