警告：在现有状态转换期间无法更新...与 store 和 clickhandler 反应答案

【问题标题】：Warning: Cannot update during an existing state transition... in react with store and clickhandler警告：在现有状态转换期间无法更新...与 store 和 clickhandler 反应
【发布时间】：2018-06-20 17:55:28
【问题描述】：

编辑：似乎此警告与我的输入范围组件有关。我会搜索问题并在这里询问，如果我找不到问题。谢谢

我搜索了这里和其他一些线程，但找不到解决方案。我正在创建一个带有一些动态页面的调查问卷，我可以在其中回答单选按钮、复选框等。

当我点击下一个按钮时，当前值将被存储并出现新的页面。

我通过页面计数器实现了这一点。如果计数器到达页面的和，将显示结果页面。

当我单击下一个按钮时，似乎一切正常，但我收到警告：

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

我减少了此处显示的代码。我希望这没问题。

这是构造函数：

constructor(props) {
    super(props);
    this.state = {
      startDate: moment(),
      values: {}
    };
}

渲染函数：

render() {
    const {show_result} = this.props;


    if(!show_result) {
        return (
            <div className="applicationbody">
                {this.renderActiveForm()}
            </div>
            );
    } else {
        const {children} = this.props; 
        return (
            <div className="applicationbody">
                {children}
            </div>
        );
    }
}

renderActivForm 函数：

renderActiveForm = () => {
    const {page_now, count_cats, count_pages, categories_pages_quantity, language, catValuesCountAll, cat_values} = this.props;

    return (
        <div className="applicationbody__form">
            {page_now.block.map((oneblock, i) => {
                return (
                    this.renderReturnInput(oneblock, i)
                );
            })}
          <div className="ButtonBar">
            <a className="button"
               onClick={this.save}>weiter</a>
          </div>
       </div>
    );
}

保存功能：

save = () => {
    const {page_now, count_cats, count_pages, categories_pages_quantity, catValuesCountAll} = this.props;
    const cat_new = (count_pages + 1) === categories_pages_quantity.cats[count_cats].pages ? (count_cats + 1) : count_cats;
    const page_new = (count_pages + 1) === categories_pages_quantity.cats[count_cats].pages ? 0 : (count_pages + 1);

    if (page_now.evaluate === "1") {
        var cat_value_of_this_page = sum(this.state.values);

        function sum( obj ) {
            var sum = 0;
            for( var el in obj ) {
            if( obj.hasOwnProperty( el ) ) {
                sum += parseFloat( obj[el] );
            }
            }
            return sum;
        }
        catValuesCountAll(page_new);
    } else {

    }
}

catValuesCountAll 操作只会增加 pagenow，因此会显示带有 ne 问题的新页面。但为什么我会收到警告？

如果有人可以在这里帮助我，我会非常高兴。

编辑：似乎此警告与我的输入范围组件有关。我会搜索问题并在这里询问，如果我找不到问题。谢谢

【问题讨论】：

标签： javascript reactjs react-redux

【解决方案1】：

好的，我现在解决了这个问题。 input-range component 想要拥有最小值和最大值的状态。所以我在渲染过程中设置了状态，因为它必须是动态的。但是现在我在 componentWillMount 和 componentWillReceiveProps 中设置了状态，警告就消失了。

【讨论】：