从数组中的值渲染 Redux Form 的字段

Question

我正在为包含多个字段的图表创建过滤器。其中大部分是已知字段，但有一部分是动态的，即用户希望将哪些房屋包含在图中。这些房子包含在我的状态中，并且每个用户都不同（基本上，用户选择他们的名字）。是房子部分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>
      );
    });
  }

但后来我只收到此错误消息：

Warning: setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

这是我在 React 中的第一个项目，所以我很确定我只是忽略了这里的一些东西，但我找不到解决方案，如果有人能在这里帮助我，我将不胜感激。

（我也知道我可以升级到 redux form 6 并使用 FieldArray，但我真的不想在项目中间这样做。）

Answer 1

根据您的代码判断，我认为您遇到了错误，因为您直接在渲染方法中添加了 houseArray。这将触发对组件道具的更新，这不应发生在渲染方法中，因此会出现错误。

如果您查看您提供的深层表单 link，您会注意到唯一对字段进行修改的地方是在按钮事件处理程序中。

在你的情况下，我认为你想要做的是 link 你的房子数组中的条目，到实际的复选框。现在您只是添加复选框，但它没有引用房屋字段：

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

或者可能是这样，取决于房子的属性：

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

附带一提，我真的会建议升级到版本 6，因为 API 更有意义，并且它比以前的版本包含很多改进。有一个迁移指南：http://redux-form.com/6.6.1/docs/MigrationGuide.md/

从数组中的值渲染 Redux Form 的字段

Render fields for Redux Form from values in an array

reactjs

redux-form