Реагировать: Отфильтрованный поиск / «города» не определены no-undef

Question

Я пытаюсь выполнить отфильтрованный поиск по реакции, однако он продолжает выдавать ошибку: «города» не определены no-undef

У меня есть один компонент: Города. js

import React from "react";
export default class Cities extends React.Component {
  state = {
    loading: true,
    cities: []
  };

  async componentDidMount() {
    const url = "http://localhost:5000/cities/all";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ cities: data, loading: false });
    console.log(data);
  }
  constructor() {
    super();
    this.state = {
      search: ""
    };
  }

  updateSearch(event) {
    this.setState({ search: event.target.value.substr(0, 10) });
  }

  render() {
    // FILTER
    let filteredCities = this.state.cities.filter(city => {
      return (
        cities.city.toLowerCase().indexOf(this.state.search.toLowerCase()) !==
        -1
      );
    });

    return (
      <div>
        <input
          type="text"
          value={this.state.search}
          onChange={this.updateSearch.bind(this)}
        />

        {this.state.loading ? (
          <div> loading... </div>
        ) : (
          <div>
            {this.state.cities &&
              filteredCities.map(places => (
                <div key={places._id}>
                  {places.city}, {places.country}{" "}
                  <div>
                    <img src={places.url} />
                  </div>
                </div>
              ))}
          </div>
        )}
      </div>
    );
  }
}

У меня начались проблемы после того, как я добавил:
// FILTER let FilterCities = this.state.cities.filter (city => {return (towns.city.toLowerCase (). IndexOf (this. state.search.toLowerCase ())! == -1

Answer 1

Неопределенная ошибка вызвана фильтрацией обратного вызова с использованием неопределенного cities. Вам нужно использовать city вместо этого.

Пример:

render() {
    // FILTER
    const filteredCities = this.state.cities.filter(city => {
        return city.city.toLowerCase().includes(this.state.search.toLowerCase())
    });

    return (
      <div>
        <input
          type="text"
          value={this.state.search}
          onChange={this.updateSearch.bind(this)}
        />

        {this.state.loading ? (
          <div> loading... </div>
        ) : (
          <div>
            {filteredCities &&
              filteredCities.map(places => (
                <div key={places._id}>
                  {places.city}, {places.country}{" "}
                  <div>
                    <img src={places.url} />
                  </div>
                </div>
              ))}
          </div>
        )}
      </div>
    );
  }
}

Возможно, вы также удаляете cities из вашего состояния по умолчанию в конструкторе (что может вызвать проблемы). Вместо этого вы можете удалить определенный объект из класса и просто определить его в конструкторе с помощью this.state. Пример:

constructor(props) {
    super(props);

    this.state = {
      search: "",
      loading: true,
      cities: []
    };
}

Кроме того, поскольку вы используете функцию aync + await, настоятельно рекомендуется заключить ожидание в try...catch для обработки любых потенциальных ошибок.

Пример:

async componentDidMount() {
    const url = "http://localhost:5000/cities/all";
    try {
        const response = await fetch(url);
        const data = await response.json();
        this.setState({ cities: data, loading: false });
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}