Реакция setState в функции обратного вызова вызывает бесконечный цикл в render()

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.

Что мне здесь не хватает?