在异步数据准备好之前，如何暂停 React-Autosuggest 搜索？

Question

我有一个使用 React-Autosuggest 搜索少量数据的功能，一旦从后端获取，所有数据都存储在内存中。换句话说，在初始批量提取之后，不再有网络调用来增强搜索。

当搜索框调用 onSuggestionsFetchRequested 时我调用的函数天真地查看 this.props.dataset 到 return 搜索建议。

    <Autosuggest
      ...
      onSuggestionsFetchRequested={({value}) => {this.setState({currentSearchSuggestions: this.getSuggestions(value)});}}
      ...
    />

    getSuggestions(rawValue) {
      const toSearchThrough = Object.values(this.props.dataset);
      ...
    }

但是，如果用户输入搜索 before this.props.dataset 被填充，即使在数据加载后也不会显示任何建议，直到用户稍微更改他们的输入，导致 getSuggestions 再次被调用。

在数据集准备好之前，我可以做一些聪明的事情来阻止 getSuggestions 吗？同样，这只会在每次页面加载时发生一次。

Answer 1

你能阻止组件在有数据之前渲染吗？如果 dataset 是一个空对象，你必须检查它的长度，但像这样：

{this.props.dataset && (
   <Autosuggest ... />
)}

Answer 2

我想这可以解决你的问题。

componentDidUpdate(prevProps) {
  // Assume this.state.searchQuery is set on user input via onChange defined in Autosuggest inputProps
  if (this.state.searchQuery && this.props.dataset !== prevProps.dataset) {
    this.setState({currentSearchSuggestions: this.getSuggestions(searchQuery)});}
  }
}

在异步数据准备好之前，如何暂停 React-Autosuggest 搜索？

How can I pause a React-Autosuggest search until after async data is ready?

javascript

asynchronous

search-suggestion

reactjs