ReactJS: Warning: setState (...): невозможно обновить во время существующего перехода состояния

Ответ 1

Похоже, вы случайно вызываете метод handleButtonChange в методе рендеринга, скорее всего, хотите сделать onClick={() => this.handleButtonChange(false)}.

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

В constructor:

this.handleButtonChangeRetour = this.handleButtonChange.bind(this, true);
this.handleButtonChangeSingle = this.handleButtonChange.bind(this, false);

И в методе render:

<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChangeSingle} >Retour</Button>
<Button href="#" active={this.state.singleJourney} onClick={this.handleButtonChangeRetour}>Single Journey</Button>

Ответ 2

Я даю общий пример для лучшего понимания, в следующем коде

render(){
    return(
      <div>

        <h3>Simple Counter</h3>
        <Counter
          value={this.props.counter}
          onIncrement={this.props.increment()} <------ calling the function
          onDecrement={this.props.decrement()} <-----------
          onIncrementAsync={this.props.incrementAsync()} />
      </div>
    )
  }

Когда я поставляю реквизиты, я вызываю функцию напрямую, эта wold имеет выполнение бесконечного цикла и выдаст вам эту ошибку. Удалите вызов функции, все работает нормально.

render(){
    return(
      <div>

        <h3>Simple Counter</h3>
        <Counter
          value={this.props.counter}
          onIncrement={this.props.increment} <------ function call removed
          onDecrement={this.props.decrement} <-----------
          onIncrementAsync={this.props.incrementAsync} />
      </div>
    )
  }

Ответ 3

Если вы пытаетесь добавить аргументы в обработчик в recompose, убедитесь, что вы правильно определяете свои аргументы в обработчике. Это, по сути, каррическая функция, поэтому вы должны быть уверены в правильном количестве аргументов. Эта страница имеет хороший пример использования аргументов с обработчиками.

Пример (по ссылке):

withHandlers({
  handleClick: props => (value1, value2) => event => {
    console.log(event)
    alert(value1 + ' was clicked!')
    props.doSomething(value2)
  },
})

для вашего ребенка HOC и в родительском

class MyComponent extends Component {
  static propTypes = {
    handleClick: PropTypes.func, 
  }
  render () {
    const {handleClick} = this.props
    return (
      <div onClick={handleClick(value1, value2)} />
    )
  }
}

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

Ответ 4

От реагирующих документов Передача аргументов обработчикам событий

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

Ответ 5

Это же предупреждение будет появляться при любых изменениях состояния, выполненных в вызове render().

Пример хитрости для поиска дела: При рендеринге компонента с множественным выбором графического интерфейса на основе данных о состоянии, если состояние не имеет ничего для отображения, вызов resetOptions() считается изменением состояния для этого компонента.

Очевидное решение - сделать resetOptions() в componentDidUpdate() вместо render().

Ответ 6

У меня такая же ошибка, когда я звонил

this.handleClick = this.handleClick.bind(this);

в моем конструкторе, когда handleClick не существует

(я удалил его и случайно оставил оператор привязки "this" в моем конструкторе).

Решение = удалить оператор привязки "this".

Ответ 7

Проблема, безусловно, заключается в этом связывании при повторном нажатии кнопки с обработчиком onClick. Решением является использование функции стрелки при вызове обработчика действия при рендеринге. Нравится:   onClick={ () => this.handleButtonChange(false) }

Ответ 8

Решение, которое я использую для открытия Popover для компонентов, - это Reactionstrap (компоненты React Bootstrap 4).

    class Settings extends Component {
        constructor(props) {
            super(props);

            this.state = {
              popoversOpen: [] // array open popovers
            }
        }

        // toggle my popovers
        togglePopoverHelp = (selected) => (e) => {
            const index = this.state.popoversOpen.indexOf(selected);
            if (index < 0) {
              this.state.popoversOpen.push(selected);
            } else {
              this.state.popoversOpen.splice(index, 1);
            }
            this.setState({ popoversOpen: [...this.state.popoversOpen] });
        }

        render() {
            <div id="settings">
                <button id="PopoverTimer" onClick={this.togglePopoverHelp(1)} className="btn btn-outline-danger" type="button">?</button>
                <Popover placement="left" isOpen={this.state.popoversOpen.includes(1)} target="PopoverTimer" toggle={this.togglePopoverHelp(1)}>
                  <PopoverHeader>Header popover</PopoverHeader>
                  <PopoverBody>Description popover</PopoverBody>
                </Popover>

                <button id="popoverRefresh" onClick={this.togglePopoverHelp(2)} className="btn btn-outline-danger" type="button">?</button>
                <Popover placement="left" isOpen={this.state.popoversOpen.includes(2)} target="popoverRefresh" toggle={this.togglePopoverHelp(2)}>
                  <PopoverHeader>Header popover 2</PopoverHeader>
                  <PopoverBody>Description popover2</PopoverBody>
                </Popover>
            </div>
        }
    }

Ответ 9

Обычно это происходит, когда вы звоните

onClick={this.handleButton()} - обратите внимание на () вместо:

onClick={this.handleButton} ' - обратите внимание, здесь мы не вызываем функцию