Question

我遇到的问题是react 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

您在Async设置中将prop defaultOptions设置为true，这告诉Async组件从loadOptions prop获取默认选项。如果道具返回值（或应在值中解析的承诺），则组件会将其绑定到defaultOptions状态以呈现为默认选项。

从文档中

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

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

因此基本上需要进行一些“默认”搜索，因为由于defaultOptions设置为true，因此第一次会调用loadOptions函数。

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

React Select Async从下拉列表中清除结果

1 个答案: