Состояние не обновляется после возврата поискового фильтра

Question

Добрый день, я делаю поисковый фильтрactjs, используя метод filter, моя проблема в том, что каждый раз, когда я нажимаю клавишу Backspace, она не возвращается к исходному состоянию или состоянию, которое я установил в componentdidMount после вызова ajaxПочему мое состояние не обновляется до состояния, которое я назначил в componentDidMount?

Это мой код.

class FilterInputs extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
    this.onSubmit = this.onSubmit.bind(this);
  }

  searchHandler(event) {
    event.preventDefault();
    let itemss = this.state.items;
    let searcjQery = event.target.value.toLowerCase();
    let x = itemss.filter(el => {
      let searchValue = el.rocket.rocket_name.toLowerCase();
      return searchValue.indexOf(searcjQery) !== -1;
    })

    this.setState({
      items: x
    });
  }

  componentDidMount() {
    axios.get(`http://localhost:8001/api`).then(res => {
      const missions = res.data;
      missions.map(item => {
        const xx = item.rocket.rocket_name;
      });
      this.setState({
        items: missions
      });
    });
  }

Могу ли я узнать, что я сделал не так?Заранее спасибо.

Answer 1

Позволяет установить фильтр в нашем state с именем rocketNameQuery и выполнить рендеринг на основе этого запроса.

Я изменил код, чтобы сделать его более читабельным.

class FilterInputs extends Component {
  constructor(props) {
    super(props);
    this.state = {
      missions: [],
      // set our filter condition
      rocketNameQuery: '',
    };
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    axios.get('http://localhost:8001/api')
      // extract data to a variable named missions and set our state
      .then(({ data: missions }) => {
        this.setState({ missions });
      });
  }

  searchHandler(event) {
    event.preventDefault();
    const rocketNameQuery = event.target.value.toLowerCase();
    // update rocketNameQuery leaving state.missions untouched
    this.setState({ rocketNameQuery });
  }

  checkFilterQuery(mission, rocketNameQuery) {
    return mission.rocket.rocket_name.toLowerCase() === rocketNameQuery;
  }

  render() {
    const { missions, rocketNameQuery} = this.state;
    return !rocketNameQuery 
      ? missions.map(mission => <div key={/* Add a unique key */}>{/* render logic */}</div>)
      : (
        <div>
          // check if our item rocket name match our rocketNameQuery
          {missions.map(mission => this.checkFilterQuery(mission, rocketNameQuery)
            // match ? render logic
            ? <div key={/* Add a unique key */}>{/* Your render logic here */}</div>
            // no match ? return null which will render nothing
            : null
          ))}
        </div>
      );
  }
}