Блог

Главная - Вопросы по программированию - Реагируйте условно, повторная визуализация не срабатывает

Реагируйте условно, повторная визуализация не срабатывает

#javascript #reactjs #setstate

Вопрос:

Редактировать Проблема заключалась в условии, которое я не заметил в методе жизненного цикла shouldComponentUpdate. Поэтому, пожалуйста, проверьте это, если у вас возникнут какие-либо проблемы, подобные моим. Редактировать

Я в значительной степени зашел в тупик, и я не понимаю, почему простое условное повторное отображение этого не работает.

У меня следующее состояние

   constructor(props) {
    super(props);
    this.state = {
 showConflicts: false
}

Я хочу переключить компонент на основе параметра, который у меня есть в состоянии, поэтому у меня есть эта кнопка:

  <Icon
              icon={"info-sign"}
              intent={"primary"}
              onClick={this.handleShowConflict}
            />

что вызывает это

   handleShowConflict = (e) => {
    this.setState({
      showConflicts: !this.state.showConflicts
    })
  }

При нажатии на кнопку состояние обновляется должным образом.

Но моя составляющая не меняется. Просто написал пустышку ниже того, что у меня есть:

             {
              this.state.showConflicts?
            
               <ConflictTab
                 scrollTo={this.handleConflictScrollTo}
                 data={this.state.conflicts}
               />
              : <Icon
              icon={"info-sign"}
              intent={"primary"}
              onClick={this.handleShowConflict}
            />
            }

Я потратил на это слишком много времени, не знаю почему, но мой код не перерисовывается.

У меня есть куча подобных реализаций в этом проекте, и они работают нормально, в заданном состоянии это перерисовывается, но в этом конкретном компоненте это не так.

Заранее большое спасибо!

Комментарии:

1. Что такое isConflictsUpdated ?

2. Я не понимаю, где ты обновляешься this.state.isConflictsUpdated ?

3. Моя вина.. Я написал код вручную сейчас, неправильно, должно быть это.state.showConflicts

4. Всякий раз, когда используется предыдущее состояние для получения нового значения состояния, всегда лучше использовать это : this.setState((prevState) => { return { showConflicts: prevState.showConflicts } }). Настройка состояния асинхронна, и вы не должны полагаться на значения состояния.

5. Является ли значок пользовательским компонентом, созданным вами? onClick может так не сработать

Ответ №1:

Вы ссылаетесь на состояние в setState. Попробуйте решить эту проблему и посмотрите, работает ли она

   handleShowConflict = (e) => {
    this.setState(prev => ({
      showConflicts: !prev.showConflicts
    }))
  }

это.состояние может обновляться асинхронно, вы не должны полагаться на их значения для вычисления следующего состояния.

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

Комментарии:

1. К сожалению, это не сработало, это изменение кода, которое я сделал, это.setState((prevState) => { возврат { isConflictsUpdated: !prevState.isConflictsUpdated }; }); };

2. Ну что ж, извините за это … может быть, вы могли бы привести пример для подражания?

3. codesandbox.io/s/affectionate-tdd-8lo4q?file=/src/App.js , но, к сожалению, это работает в песочнице, я не могу воспроизвести весь свой компонент, он огромен, есть идеи, что может на это повлиять? Я не выполняю никаких других настроек, когда нажимаю на эту кнопку

Метки: ,