Question

我有一个复杂的应用程序，它给了我以下警告：

警告：setState（...）：无法在现有状态转换期间更新（例如在render或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数;构造函数副作用是反模式，但可以移动到componentWillMount。

用两个词来说，当我按下“添加”按钮时会出现此警告。按钮，应该添加另一个组件到我的应用程序。这是一段相应的代码：

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

addChartHandler来自它的容器组件：

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

addChart只是增加了组件计数器。 app容器订阅了这些更改：

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>
    );
}

欢迎任何建议。一直在努力工作至少三个小时，没有想法。

Answer 1

这是代码行，因为代码导致了我感觉到的问题： -

  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>
    );
}

Answer 2

感谢所有答案，我解决了这个问题：我在其他组件setState中调用了constructor()。对于那些要么寻找：仔细检查所有其他组件，以及他们的render()和constructor()方法。

Answer 3

这个解决方案帮助我清除了我的想法。

我遇到了这个错误，因为我在构造函数中添加了this.setState({});。

所以我把它移到componentWillReceiveProps并且它奏效了！

谢谢@Harkirat Saluja

警告：在现有状态转换期间无法更新

3 个答案: