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}
/>

希望这能解决你的问题