從數組中的值渲染Redux Form的字段

Question

我正在為包含多個字段的圖形創建過濾器。 它們中的大多數是已知字段，但是一部分是動態的，即用戶希望將哪些房子包括在圖中。 這些房屋包含在我的狀態下，並且對於每個用戶而言都是不同的（基本上，用戶選擇它們的名字）。 這是分手的房子在這里我想根據這個道具來動態地呈現。

我發現的唯一示例是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內）無法更新。 渲染方法應該純粹是props和state的函數。

這是我在React中的第一個項目，因此我敢肯定我只是在這里忽略了一些東西，但是我找不到解決方案，如果有人可以在這里幫助我，我將不勝感激。

（我也知道我可以升級到redux form 6並使用FieldArray，但是我真的不想在項目的中間進行操作。）

Answer 1

根據您的代碼判斷，我認為您會收到錯誤，因為您是直接在render方法中添加到houseArray的 。 這將觸發對組件屬性的更新，該更新不應在render方法中發生，因此會出現錯誤。

如果查看您提供的Deep Form鏈接，您會注意到對字段的唯一修改是在按鈕事件處理程序內進行的。

在您的情況下，我認為您想要做的是將房屋陣列中的條目鏈接到實際的復選框。 現在，您僅添加復選框，但沒有引用房屋字段：

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

也許這取決於房子的屬性：

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

附帶一提，我真的建議升級到版本6，因為API更具意義，並且相對於先前的版本包含很多改進。 有一個遷移指南： http : //redux-form.com/6.6.1/docs/MigrationGuide.md/