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

Question

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

我在搜索框调用时调用的函数onSuggestionsFetchRequested天真地查看this.props.dataset以返回搜索建议。

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

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

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

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

标签： javascriptreactjsasynchronoussearch-suggestion

Answer 1

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

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