React+Ant：隐藏表单项，可用于表单中的选择框拿取多个数据

近期刚接触React+ts+Ant,遇见了挺多的问题，因为觉得不太好描述，且遇见的问题大多依赖项目的规范，所以就没有记录。

问题描述：表单里有一个下拉选择框，Option是一个包含很多内容的对象，后端要求需要传选择项的多个数据，一开始就在 Select 组件的 Option 选项中传递了一个 JSON 对象作为其 value 属性，以便将该对象的多个属性值一并传递给后端（这里注意不可以直接传递item,item是一个对象，对象不可以作为value值传递），等到提交的时候再处理数据，这样就完成了新增。问题出现在编辑的时候，后端只返回了指定 id 值而没有返回相应的 name 值，那么在编辑时就无法直接回显该信息。

首先想到的办法是编辑的时候前端处理数据，编辑的时候在前端获取到后端返回的 id 值后，可以在列表中查找符合该 id 的数据对象，然后将该对象的属性值设置为 Select 组件的默认值即可，应对数据回显需求。这种方式不算复杂但是我觉得也不太理想，这里就记录一下另一种解决办法。

解决办法：

使用隐藏表单项的方式，下拉选择框的option的value还是设置为id,这样利于回显，将其余需要的字段单独写一个表单项，设为hidden,在下拉选择框的onChange事件，给表单赋值。具体代码如下：

 <Form.Item
   {...restField}
   label="请选择"
   name={[name, 'id']}
   >
   <Select
      placeholder="请选择"
      onChange={(value, option) => {
        form?.setFieldValue([name, 'id'], value);
        form?.setFieldValue(['details', name, 'name'],option.children);
        }}
   >
    {list.map((item) => (
       <Option key={item.id} value={item.id}>
          {item.name}
       </Option>
    ))}
       </Select>
     </Form.Item>
<Form.Item name={[name, 'name']} hidden>
  <Input></Input>
</Form.Item>

 form?.setFieldValue(['details', name, 'name'],option.children);
这里直接写为form?.setFieldValue([ name, 'name'],option.children)就可以，因为我是动态增删的表单项，循环出了多了form.item,所以加了循环的数组字段。

补充一下：因为这里我只需要id和name,name也就是下拉框的展示数据，所以可以通过option的children取数据。如果还需要其它数据，还可以设置多个隐藏表单项。换一个取值方式：

onChange={(value, option) => {
  const selectedOption = list.find(
    (item) => item.id === value
   );
  if (selectedOption) {
    form.setFieldsValue({
       [`${name}.id`]: value,
       [`${name}.name`]: selectedOption.name,
       [`${name}.age`]: selectedOption.age,
     });
   }
}}