React Select 异步清理下拉列表的结果

Question

我遇到的问题是反应 select 正在清除搜索后下拉列表中的结果。

我正在寻找一种方法将结果列在下拉列表中，正如我在沙盒中的第一个示例中列出的那样：https://codesandbox.io/s/7yp7zr9r9x

部分代码：

    export default class App extends Component {
    searchTitles = movieTitle => {
      if (!movieTitle) return
      const urlRequest = `${SEARCH_URL}{movieTitle}`
      const newRequest = axios.get(urlRequest)

      if (newRequest) {
        // new promise: pending
        return newRequest.then(response => {
        // promise resolved : now I have the data
        const compare = response.data.results.filter(i =>
          i.overview.toLowerCase().includes(movieTitle.toLowerCase())
        )
        return compare.map(film => ({
          label: film.title
        }))
      })
    }
  }

   render() {
      <AsyncSelect
        cacheOptions
        defaultOptions
        loadOptions={this.searchTitles}
       />
   }
}

这是问题的沙盒： https://codesandbox.io/s/7yp7zr9r9x

Answer 1

您在异步设置中将 defaultOptions 属性设置为 true，这会告诉异步组件从 loadOptions 属性中获取默认选项。如果 prop returns 值（或应该在值中解析的承诺）组件将它们绑定到 defaultOptions 状态以呈现为默认选项。

来自文档：

在用户开始搜索之前显示的默认选项集。设置为 true 时，将自动加载 loadOptions('') 的结果。

您在 loadOptions 函数中发出的请求在首次呈现时返回错误。因此不能将任何值设置为默认选项。

所以基本上需要进行一些 "default" 搜索，因为由于 defaultOptions 设置为 true，loadOptions 函数将在第一次调用。

固定示例： https://codesandbox.io/s/7yp7zr9r9x

React Select 异步清理下拉列表的结果

React Select Async cleaning the results from dropdown

react-select