Select.Async 和 loadOptions 的奇怪行为

Question

我有一个关于 react-select 组件的问题。

我有以下代码 (coffeescript) 和非常奇怪的行为（在下面的 gif 中）。问题是——我做错了什么？为什么 getOptions 函数完成后选项没有立即显示？为什么他们只在点击外面后显示？这太令人困惑了..我需要你们的帮助！

getOptions = (value) =>
  return Promise.resolve({options: []}) unless value
  api.geocoder(value).then (data) =>
    countries = [
      {value: 'A', label: 'A'}
      {value: 'B', label: 'B'}
    ]
    console.info(countries)
    {options: countries}

<Select.Async
  className="ads-filter__select"
  value={@props.country_code}
  onChange={(option) => @props.onChange('country_code', option)}
  clearable={false}
  placeholder={I18n.t('ads.country')}
  loadOptions={getOptions}
/>

Answer 1

将此属性添加到 Select.Async：filterOption={() => (true)} 更具体地说：

<Select.Async
  className="ads-filter__select"
  value={@props.country_code}
  filterOption={() => (true)}
  onChange={(option) => @props.onChange('country_code', option)}
  clearable={false}
  placeholder={I18n.t('ads.country')}
  loadOptions={getOptions}
/>

希望这能解决您的问题

Select.Async 和 loadOptions 的奇怪行为

Weird behaviour with Select.Async and loadOptions

react-select