Question

编辑：这个警告似乎与我的输入范围组件有关。如果我找不到问题，我会搜索问题然后在这里问一下。感谢名单

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

当我点击下一个按钮时，将存储当前值并显示新页面。

我用页面计数器意识到了这一点。如果计数器到达页面和页面，将显示结果页面。

当我点击下一个按钮时，一切似乎都有效，但我收到了警告：

警告：在现有状态转换期间（例如在render或其他组件的构造函数中）无法更新。渲染方法应该是道具和状态的纯函数;构造函数副作用是反模式，但可以移动到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操作仅增加页面，因此显示带有ne问题的新页面。但为什么我会收到警告？

如果有人能在这里帮助我，我会很高兴。

编辑：这个警告似乎与我的输入范围组件有关。如果我找不到问题，我会搜索问题然后在这里问一下。感谢名单

Answer 1

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

警告：在现有状态转换期间无法更新...与商店和点击处理程序做出反应

1 个答案: