[解決済み] ReactJS: Warning: setState(...): 既存の状態遷移の間に更新することはできません

質問

私はレンダービューから次のコードをリファクタリングしようとしています。

<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChange.bind(this,false)} >Retour</Button>

を、バインドがコンストラクタ内にあるバージョンに変更しました。その理由は、レンダリングビューでバインドすると、特にローエンドの携帯電話ではパフォーマンスの問題が発生するためです。

以下のようなコードを作成したのですが、常に以下のようなエラーが発生します（たくさんあります）。アプリがループしてしまうようです。

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

以下は、私が使っているコードです。

var React = require('react');
var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
var Button = require('react-bootstrap/lib/Button');
var Form = require('react-bootstrap/lib/Form');
var FormGroup = require('react-bootstrap/lib/FormGroup');
var Well = require('react-bootstrap/lib/Well');

export default class Search extends React.Component {

    constructor() {
        super();

        this.state = {
            singleJourney: false
        };

        this.handleButtonChange = this.handleButtonChange.bind(this);
    }

    handleButtonChange(value) {
        this.setState({
            singleJourney: value
        });
    }

    render() {

        return (
            <Form>

                <Well style={wellStyle}>

                    <FormGroup className="text-center">

                        <ButtonGroup>
                            <Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChange(false)} >Retour</Button>
                            <Button href="#" active={this.state.singleJourney} onClick={this.handleButtonChange(true)} >Single Journey</Button>
                        </ButtonGroup>
                    </FormGroup>

                </Well>

            </Form>
        );
    }
}

module.exports = Search;

解決方法は？

を誤って呼び出しているようです。 handleButtonChange メソッドを使用したい場合は、おそらく onClick={() => this.handleButtonChange(false)} の代わりに

onClickハンドラでラムダを作りたくない場合は、パラメータごとに2つのバインドメソッドを用意する必要があると思うのですが、どうでしょうか？

において constructor :

this.handleButtonChangeRetour = this.handleButtonChange.bind(this, true);
this.handleButtonChangeSingle = this.handleButtonChange.bind(this, false);

そして、その中の render メソッドを使用します。

<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChangeSingle} >Retour</Button>
<Button href="#" active={this.state.singleJourney} onClick={this.handleButtonChangeRetour}>Single Journey</Button>