如何从接口响应提取指定字段，适配Autocomplete的getOptionLabel配置

你只需要在接口返回数据后，对responseData做一次字段提取映射，把原对象数组转换成仅包含itemNo值的字符串数组即可，同时保证初始值格式和选项格式一致。

1. 接口请求逻辑修改 #

把原setState里赋值的responseData替换为映射后的值，示例代码如下：

onChangeInputItemNo = value => {
  getItem(value).then(
    (response) => {
      if (response.ok) {
        response.json()
          .then((responseData) => {
            console.log(responseData);
            // 提取所有元素的itemNo字段，生成纯字符串数组
            const processedItemData = responseData.map(item => item.itemNo)
            this.setState({
              isLoading: false,
              ItemData: processedItemData
            })
          });
      }
    })
}

若你的接口返回的responseData是单个对象而非数组，可将处理逻辑改为const processedItemData = [responseData.itemNo]

2. 组件逻辑适配注意事项 #

• 从子组件传递的初始值this.state.fromChild必须为字符串类型，和ItemData数组内的元素类型保持一致，否则Autocomplete会出现默认值匹配失败的问题
• onChangeItemNo回调中接收的选中值直接就是字符串格式的itemNo，不需要再从对象中取字段
  你原有的Autocomplete组件代码不需要修改，getOptionLabel={option => option}的写法可以正常运行。

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