Reactjs React中的搜索栏：由于setState，建议和查询不匹配

我基本上是创建一个城市建议搜索栏。它调用了一个API，在此基础上我给出了一些建议。但由于我必须调用setState，因此查询和建议不匹配

重新创建错误：如果键入Indore并在一个连续笔划中通过退格完全清除查询。即使输入字段为空，您仍然可以看到留下的建议

import React, { Component} from 'react';
import './App.css';


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      inputText: "",
      listItems: []
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event){
    if (event.target.value.length > 0){
      var apiKey = process.env.REACT_APP_HERE_API_KEY;
      fetch("https://autocomplete.geocoder.ls.hereapi.com/6.2/suggest.json?apikey="+ apiKey +"&query="+event.target.value)
      .then(res => res.json())
      .then(data => {
        data = data.suggestions;
        var lst = []
        for (var i=0; i<data.length; i++) {
          if (data[i].matchLevel === "city") {
            var city = data[i].address.city;
            var state = data[i].address.state;
            var country = data[i].address.country;
            var finalString = city;
            if (state !== undefined) {
              finalString += ", "+state;
            }
            if (country !== undefined) {
              finalString += ", "+country;
            }
            if (i === data.length - 1) {
              lst.push(<li className="search-result-last-item" key={city}>{finalString}</li>)
            }
            else {
              lst.push(<li key={city}>{finalString}</li>)
            }
          }
        }
        this.setState({
          listItems: lst
        });
      })
    }
    else {
      this.setState({
        listItems: []
      })
    }
  } 

  render() {
    return (
      <div>
        <div className="search-box">
          <input className="search-input" type="text" onChange={this.handleChange}></input>
          <ul className="search-result">
            {this.state.listItems}
          </ul>
        </div>

      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
输入文本：“”，
清单项目：[]
}
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
如果（event.target.value.length>0）{
var apiKey=process.env.REACT\u APP\u HERE\u API\u KEY；
取回（“https://autocomplete.geocoder.ls.hereapi.com/6.2/suggest.json?apikey=“+apiKey+”&query=“+event.target.value）
.then（res=>res.json（））
。然后（数据=>{
数据=数据。建议；
var lst=[]
对于（var i=0；i尝试删除target.length上的条件，而不是让API获取数据并决定是否有数据，并相应地调用setState。
我猜不匹配是由于多个setState调用造成的，当您清除所有文本时，会触发多个setState调用，最后一次调用清空该文本list的运行时间早于promise API调用中的setState调用。是的，情况就是这样。解决方案是什么？你是否应用了我之前告诉你的修复程序？这可能会完成你的工作。因此，当你收到API的响应时，setState将始终被调用，如果是空文本，数据将为空，因此你的列表也将为空。实际上hats不是问题。问题是，如果我提供输入，我将保留以前输入的结果。这是因为提供输入和获取结果之间存在延迟。您的意思是，每个输入获取数据并显示以前输入的结果不是最新的，还是始终保留第一次获取的数据？