React-hook-form集成react-select AsyncSelect初始选中标签不显示

UI空白的核心原因有两个：

• 你配置的getOptionLabel、getOptionValue取值规则和传入的选中值结构不匹配。当前配置是从选项对象中读取name作为显示文本、读取id作为值标识，但你构造的tmpArtist只有value和label字段，没有name、id属性，组件渲染选中项时拿不到要显示的文本，自然显示空白。
• 初始渲染阶段接口数据还未返回，第一次挂载时表单字段拿到的是空值，后续赋值如果结构不匹配，也无法触发组件正确渲染选中态。

二选一即可，优先选方案1，和react-select的异步加载逻辑适配性更好。

方案1：统一值结构（推荐） #

直接使用后端返回的完整artist对象作为字段值，和AsyncSelect搜索加载返回的选项结构完全对齐，不需要修改原有getOptionLabel/getOptionValue配置。

1. 接口数据返回后，用react-hook-form的reset方法一次性初始化整个表单，比逐个调用setValue更适合编辑态场景：

useEffect(() => {
  if (record?.data) {
    const formDefaultValues = {
      barcode: record.data.barcode,
      title: record.data.title,
      slug: record.data.slug,
      artist_id: record.data.artist, // 直接传入完整artist对象，自带id、name字段
      genre_id: record.data.genre,
      num_of_records: record.data.num_of_records,
      original_release_date: record.data.original_release_date,
      reissue_release_date: record.data.reissue_release_date,
      label: record.data.label
    }
    reset(formDefaultValues)
  }
}, [record, reset])

2. Controller不需要额外配置defaultValue，AsyncSelect原有配置保持不变即可。此时传入的artist_id值自带id和name属性，getOptionLabel可以正常读取到name字段作为显示文本，UI会正确渲染选中项。
3. 表单提交时如果后端只需要艺人ID，直接从值中取artist_id.id传递即可，不需要调整表单存储结构。

方案2：保留{value, label}值结构 #

如果你需要用{value: id, label: name}的结构存储选中值，同步修改AsyncSelect的取值规则，保证所有选项结构统一即可：

1. 修改AsyncSelect的getOptionLabel、getOptionValue配置，对应读取label和value字段：

<AsyncSelect
  {...field}
  isClearable
  defaultOptions
  placeholder={"Artist's name"}
  loadOptions={loadArtistOptions}
  onInputChange={handleArtistInputChange}
  cacheOptions
  getOptionLabel={e => e.label}
  getOptionValue={e => e.value}
/>

2. 同步修改loadArtistOptions的返回值，把搜索到的艺人列表统一格式化为{value: 艺人id, label: 艺人name}的结构，保证搜索选项和初始值结构一致。
3. 数据加载完成后正常调用setValue或reset赋值即可。

• 不要在组件函数顶层直接声明tmpArtist这类可变变量，每次组件重渲染都会重置这类变量，容易引发值不同步问题，相关逻辑放到useEffect或useMemo中处理。
• AsyncSelect渲染选中项的逻辑是：从已加载的选项池（defaultOptions、缓存选项、手动传入的value）中，通过getOptionValue匹配到和当前value相等的项，再通过getOptionLabel取文本渲染，必须保证传入value的结构和选项结构完全一致，才能正常显示。
• 如果接口加载较慢，可以给表单加loading状态，等数据初始化完成后再渲染表单组件，避免首次渲染传空值导致的显示异常。

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