Reduxフォームのフィールドを配列の値からレンダリングする

Question

複数のフィールドを含むグラフのフィルタを作成しています。それらのほとんどは既知のフィールドですが、1つの部分は動的であり、それはユーザーがグラフに含めることを希望する家のことです。家は私の状態に含まれており、ユーザーごとに異なります（基本的に、ユーザーは名前が何であるかを選択します）。それは家の部分ですhere私は小道具に基づいて動的にレンダリングしたいです。

これの唯一の例はthisですが、私はその問題をどのように移行できるかについての解決策を見つけられませんでした。

renderHouseFields() { 
    const { fields: { houseArray } } = this.props; 
    return this.props.houses.map((house) => { 
     const houseField = (
     <label 
      {...houseArray} 
      className="col-xs-9 control-label" 
      htmlFor="cottageCheckbox" 
     > 
      <input type="checkbox" /> 
     </label> 
    ); 

     houseArray.addField(houseField); 

     return (
     <div key={house.name}> 
      <label 
      className="col-xs-3 control-label" 
      htmlFor="cottage" 
      > 
      {house.name} 
      </label> 
      {houseField} 
     </div> 
    ); 
    }); 
    } 

が、その後、私は単純に、このエラーメッセージを取得：

警告：SETSTATEを私はちょうどすべての家のフィールドは（この例のように）配列に格納され、このような何かを行うことができると思いました（...）：既存の状態遷移中に更新できません（render内など）。レンダリング方法は、小道具と州の純粋な機能でなければなりません。

これは私の最初のReactプロジェクトです。私はここで何かを見落としていると確信していますが、解決策を見つけることができず、誰かが私を助けてくれたら感謝します。

（私も、私はReduxのフォーム6にアップグレードするとFieldArrayを使用できることを承知しているが、私は本当にこのプロジェクトの途中でそれを行うにはしたくない。）

Answer 1

私は数えるあなたのコードから判断すると、レンダリングメソッドでhouseArrayに直接追加するため、エラーが発生しています。これにより、コンポーネントの小道具への更新がトリガーされます。これは、レンダリングメソッドでは発生してはならないため、エラーになります。

指定したディープフォームリンクを見ると、フィールドへの唯一の場所の変更はボタンイベントハンドラ内で発生していることがわかります。

あなたの場合、私はあなたの家の配列のエントリを実際のチェックボックスにリンクすることを考えています。今あなただけのチェックボックスを追加しているが、それは家のフィールドへの参照がありません：

<input type="checkbox" name={house} /> 

それともこれを、家の特性に応じて：側では

<input type="checkbox" name={`${house}.id`} /> 

APIがもっと意味を成し、以前のバージョンよりも多くの改良点を含んでいるので、バージョン6にアップグレードすることをお勧めします。移行ガイドがあります：http://redux-form.com/6.6.1/docs/MigrationGuide.md/