Панель поиска в действии: несоответствие предложений и запросов из-за setState - PullRequest
Новая
       8

Панель поиска в действии: несоответствие предложений и запросов из-за setState

0 голосов
/ 11 декабря 2019

Я в основном создаю панель поиска для предложений города. Который вызывает API и на основании этого я показываю предложения. Но так как мне приходится вызывать setState, в запросе и предложениях есть несоответствие.

Воссоздание ошибки: Если вы введете Indore и полностью очистите запрос, нажав клавишу Backspace за один непрерывный штрих. Вы по-прежнему можете видеть предложение слева, даже если поле ввода пустое. 

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;
...