如何在antd Form中使用对象值，提交后返回与原对象结构一致的数据

问题根因 #

你当前的核心错误是getFieldDecorator的第一个参数（表单字段绑定路径）设置错误：你用了value.color、value.available这类属性的实际值作为路径的一部分，多个属性值相同的表单项会共用同一个表单状态，这就是开关同步变更、返回值结构混乱的直接原因。

解决方案 #

你需要用玩具的分类名（也就是遍历出来的key：Car/Truck/Bus/Bike）作为路径的中间层级，保证每个表单项的绑定路径唯一，修改后的代码如下：

Object.entries(
  toys
).map(([key, value]) => {
  return (
    <div key={key} className="mb-3">
      <Row type="flex">
        <Col>
          <Input value={key} readOnly />
        </Col>
        <Col>
          <Form.Item className="mb-0">
            {/* 修正字段路径为 toys.${key}.color */}
            {getFieldDecorator(`toys.${key}.color`, {
              initialValue: value.color
            })(<Input />)}
          </Form.Item>
        </Col>
        <Col>
        <Row type="flex">
        <div className="ml-3 mr-3 mt-2">Available</div>
        
          <Form.Item
            className="mr-3 mt-1"
          >
            {/* 修正字段路径为 toys.${key}.available */}
            {getFieldDecorator(`toys.${key}.available`, {
              initialValue: value.available,
              valuePropName: 'checked'
            })(<Switch checkedChildren="Yes" unCheckedChildren="No" />)}
          </Form.Item>
          </Row>
        </Col>
      </Row>
    </div>
  )
})

结果说明 #

修改后提交表单时，调用form.getFieldsValue()或者在validateFields的回调中拿到的toys字段，会直接和你预期的结构完全一致，不需要额外做数据转换。

如果你后续升级到antd v4/v5，不使用getFieldDecorator改用Form.Item的name属性绑定字段的话，原理完全相同，只要把name写成数组格式即可：

// antd v4/v5 写法示例
<Form.Item name={['toys', key, 'color']} initialValue={value.color}>
  <Input />
</Form.Item>

内容的提问来源于stack exchange，提问作者Benk I