Предупреждение: невозможно обновить во время существующего перехода состояния

У меня сложное приложение, и оно дает мне следующее предупреждение:

Предупреждение: setState (...): невозможно обновить во время существующего перехода состояния (например, в render или в конструкторе другого компонента). Методы рендеринга должны полностью зависеть от свойств и состояния; побочные эффекты конструктора - это анти-шаблон, но их можно переместить в componentWillMount.

В двух словах это предупреждение появляется, когда я нажимаю кнопку «добавить», которая должна добавить еще один компонент в мое приложение. Вот соответствующий фрагмент кода:

<Button onClick={addChartHandler.bind(this)}><Glyphicon glyph="plus" /></Button>

addChartHandler происходит из его компонента-контейнера:

addChartHandler() {
    store.dispatch(addChart());
}

addChart просто увеличивает счетчик компонентов. И контейнер приложения подписывается на эти изменения:

const mapStateToProps = (store) => {
    return {
        count: store.app.chartsCount
    };
}

Мне сложно отследить предупреждение, но я звонил console.log каждый раз при рендеринге каждого компонента. Похоже, что это предупреждение появляется после рендеринга этого компонента (который является тупым компонентом для моего App):

render() {
    let charts = [];

    for (let i = 0; i < this.props.count; i++) {
        charts.push(<ChartContainer id={i} key={i} size={this.props.size} />);
    }
    console.log('APP RENDER');
    console.log(charts);
    return (
        <div className="container-padding">
            <NavContainer />
            {charts}
        </div>
    );
}

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


reactjs javascript redux react-redux
person Oscar    schedule 13.12.2016    source источник
comment
Что делает ChartContainer?   -  person Christian    schedule 13.12.2016
comment
@Christian получает данные, необходимые для построения диаграммы (используя chart.js)   -  person Oscar    schedule 13.12.2016

Ответы (3)


arrow_upward
2
arrow_downward

Это строка кода из-за кода, который вызывает проблему, которую я чувствую: -

  for (let i = 0; i < this.props.count; i++) {
        charts.push(<ChartContainer id={i} key={i} size={this.props.size} />);
    }

Я думаю, что вы делаете setState где-то при рендеринге или ваше состояние обновляется там, где этого делать не должно. Можете ли вы однажды поделиться своим ChartContainer компонентом?

Вы можете попробовать это?

constructor(){
   state : {
     charts : []
  } 
}

componentWillReceiveProps(nextProps){
  if(nextProps.count != this.props.count){
     let charts = []
     for (let i = 0; i < this.props.count; i++) {
        charts.push(<ChartContainer id={i} key={i} size={this.props.size}      />);
    }
   this.setState({charts:charts})
  }
}

render() {
    return (
        <div className="container-padding">
            <NavContainer />
            {this.state.charts}
        </div>
    );
}
person Harkirat Saluja    schedule 13.12.2016

arrow_upward
0
arrow_downward

Это решение помогает мне прояснить мои мысли.

Я столкнулся с этой ошибкой, потому что сам добавил this.setState({}); в конструктор.

Я переместил его на componentWillReceiveProps, и это сработало!

Спасибо @Harkirat Saluja

person Tejashree    schedule 27.06.2017

arrow_upward
0
arrow_downward

Спасибо за все ответы, я решил проблему: я вызывал setState в каком-то другом компоненте constructor(). Для тех, кто ищет: перепроверьте все остальные компоненты и их render() и constructor() методы.

person Oscar    schedule 14.12.2016