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>
      );
    });
  }

然后我只是收到此错误消息：

警告：setState（...）：在现有状态转换期间（例如render内）无法更新。渲染方法应该是道具和状态的纯函数。

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

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

Answer 1

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

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

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

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

或许这可能，取决于 house 的属性：

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

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

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

1 个答案: