如何提取MUI Autocomplete多选返回数组中的CD_PESSOA字段用于POST提交

你可以通过数组原生map方法遍历选中项数组，提取每项的CD_PESSOA字段值生成纯ID数组，用于后续POST提交，有两种常见实现路径：

• 方案1：提交阶段转换（推荐）
  不修改Autocomplete组件的原有取值逻辑，组件内依然存储完整的选中项对象，保证选中标签渲染、回显等交互正常，只在表单提交时提取需要的ID字段：

  const addCliente = (data: { autocomplete: Array<{CD_PESSOA: number, NM_GUERRA: string}> }) => {
    // 遍历选中项数组，仅提取CD_PESSOA字段，输出格式为 [34063, 35354]
    const submitClienteIds = data.autocomplete.map(item => item.CD_PESSOA)
    
    // 组装POST请求参数
    const postPayload = {
      // 其余表单字段保留原有值
      ...data,
      // 替换autocomplete字段为纯ID数组，也可以根据接口要求调整字段名
      autocomplete: submitClienteIds
    }
  
    // 执行POST提交逻辑
    console.log('提交参数', postPayload)
  }
  

  这个方案不会破坏MUI Autocomplete的默认交互逻辑，不需要额外配置选项匹配规则，是生产环境最常用的实现方式。

• 方案2：选中阶段直接存储ID
  如果你不需要在表单状态中保留选中项的其他字段，也可以在Autocomplete的onChange事件中直接转换值存入表单：

  <Autocomplete
    multiple
    options={NameCliente}
    getOptionLabel={(option: Option) => option.NM_GUERRA}
    // 选中变化时直接提取ID数组存入表单
    onChange={(_, options) => {
      const idList = options.map(opt => opt.CD_PESSOA)
      setValue('autocomplete', idList)
    }}
    // 注意：使用该方案必须补充isOptionEqualToValue配置，否则已选中项无法正常渲染标签
    isOptionEqualToValue={(option, value) => option.CD_PESSOA === value}
    renderInput={params => <TextField {...params} />}
  />
  

  注意：该方案因为表单中存储的是纯ID值，和options里的完整对象结构不一致，必须配置isOptionEqualToValue属性指定匹配规则，否则组件会出现选中项不显示、无法删除等异常问题。

注意不要混淆数组方法：filter用于过滤符合条件的数组项，提取字段值请使用map方法。

内容的提问来源于stack exchange，提问作者caio silva costa