Question

将React 15.3.2与ES6和React Bootstrap一起使用。我有一种不好的感觉，我的方法是错的，但这就是我在的地方。我的父母有几个孩子，他们是表格输入：

class Foo extends React.Component {
    //... simplified for purpose of this post
    handleChange(field, value, errors) {
        this.setState({field: {value:errors}});  //causes infinite loop when rendering 
    }
    render() {
        <Bar value={this.state.inputVal1} handleChange={this.handleChange} />
        <Bar value={this.state.inputVal2} handleChange={this.handleChange} />
    }
}    

class Bar extends React.Component {
    //... simplified for purpose of this post
    handleChange(field, value, errors) {
        //pass to parent via callback
        this.props.handleChange(field, value, errors);
    }
    render() {
        <FormControl type='text' value={this.state.inputValue} onChange={this.handleChange} />
    }
}

我正在向每个子节点传递一个回调，所以当它们发生变化时，它们会将输入数据返回给父节点，以便父节点可以更新它的状态。但是，在渲染Foo时，执行此操作会导致infinte循环。

我在这里缺少什么？

回调函数中的React setState导致render（）中的无限循环

0 个答案: