Reactjs - 親の状態を変更して兄弟間の情報を交換する

Question

私は自分の電話ブランドとモデルを選択するためにユーザーが必要なリアクションアプリを作成しています。彼らは "PhoneModel"と呼ばれるサイドバーコンポーネントで自分の電話機を選択することができ、その電話機に対応する画像を別のコンポーネント "CaseImg"に表示します。 PhoneModelとCaseImgは兄弟です。私はこれを行うことを考えた

方法は、私はたくさんのを試してみた

var App = React.createClass({ 
    getInitialState: function() { 
     return { 
      phoneBrand: 'Apple', 
      phoneName: 'iphone4', 
      caseModel: 'bg1' 
     }; 
    }, 

    handlePhoneSelection: function(phone, name) { 
     this.setState({ 
      phoneBrand: phone, 
      phoneName: name 
     }); 
    }, 

    render: function(){ 
     return (
      <div> 
       <div> 
        <CaseInfo /> 
        <CaseImg phoneBrand={this.state.phoneBrand} phoneName={this.state.phoneName} caseModel={this.state.caseModel} /> 
        <CustomizeBtns /> 
       </div> 
       <div> 
        <PhoneModel handlePhoneSelection={this.handlePhoneSelection} /> 
        <CaseModel /> 
        <CustomPicture/> 
       </div> 
      </div> 
     ); 
    } 
}) 

var PhoneModel = React.createClass({ 

    handlePhoneSelection: function(brand,model) { 
     this.props.handlePhoneSelection(brand,model); 
    }, 

    render: function() { 

     return (
       <div> 
        <div onClick={this.handlePhoneSelection('apple','4s')}> 
         <imgsrc="/assets/img/apple-4s.png" /> 
        </div> 
        <div onClick={this.handlePhoneSelection('apple','7s')}> 
         <imgsrc="/assets/img/apple-7s.png" /> 
        </div> 
        <div onClick={this.handlePhoneSelection('apple','7splus')}> 
         <imgsrc="/assets/img/apple-7splus.png" /> 
        </div> 
       </div> 
     ); 
     } 
}) 

を、親の状態で、この情報を保持する「PhoneModel」を通じて状態を変更し、「CaseImg」の小道具としてそれを渡しました。

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`. 

PS：このアプリは簡単です、私はフラックスまたはReduxのを使用する必要はありませんが、私は関連の質問に見つかりましたが、同じエラーを取得し続けるさまざまなソリューション。

編集：レンダリング内部だから

<div onClick={this.handlePhoneSelection('apple','4s')}>

：

Answer 1

のonClick点this.handlePhoneSelection('apple','4s')の結果ではなくhandlePhoneSelection関数に自分の元のコードには存在しなかった上述タイプミスを、固定しましたレンダリング中にthis.handlePhoneSelection('apple','4s')がトリガされ、状態を更新しようとします。

そして、あなたが代わりにこれを実行する必要があります。

<div onClick={() => this.handlePhoneSelection('apple','4s')}>