如何在AsyncCreatableSelect组件中设置API返回的输入值？

可以实现，操作逻辑如下：

你当前使用的是受控组件模式，AsyncCreatableSelect的选中值完全由绑定的value属性（也就是你代码里的values.tag）控制，只需要按下面的规则处理数据即可：

• 首先把API返回的内容转换成组件要求的统一格式：每一项都必须是包含label（展示文本）和value（唯一标识值）的对象，多值模式下（你开启了isMulti）需要传入上述对象组成的数组
• 拿到API返回的格式化后的数据后，直接更新values.tag对应的状态即可：如果用的是Formik就调用setFieldValue('tag', 格式化后的数组)，如果是普通的useState就直接调用对应的状态更新方法

常见注意事项 #

• 传入value的数组项格式必须和loadOptions返回的选项、onCreateOption生成的选项格式完全一致，否则会出现选中后不展示、新增异常的问题
• 开启isMulti时，value必须始终保持数组类型，无选中值时要传空数组[]，不能传null或者undefined，避免组件报错

示例代码 #

你可以参考下面的示例处理API返回的默认值：

// 示例：API返回原始标签数据格式为 [{id: 1, name: '前端'}, {id: 2, name: '后端'}]
const getDefaultTags = async () => {
  const res = await 你的API请求方法()
  const rawTagList = await res.json()
  // 格式转换
  const formattedTagList = rawTagList.map(item => ({
    label: item.name,
    value: item.id
  }))
  // 更新绑定的状态
  setFieldValue('tag', formattedTagList)
}

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