Блог

Я пытаюсь создать базовое приложение, извлекая данные из API. Сейчас я пытаюсь отфильтровать значение из этих данных через массив. Я использую react-search-input и получаю "TypeError: Cannot read property 'filter' of undefined" , и я не понимаю, почему.

Что мне нужно сделать, чтобы избежать этой ошибки?

Код здесь :

 import React, { Component } from 'react';
import SearchInput, {createFilter} from 'react-search-input'

const API = 'https://swapi.co/api/people/';

class App extends Component {
    constructor(props) {
    super(props);

    this.state = {
      items: [],
      searchTerm: '',
    }
    this.searchUpdated = this.searchUpdated.bind(this)
  }

  componentWillMount() {
    this.fetchData();
  }

  fetchData = async () => {
    const response = await fetch(API);
    const json = await response.json();
    this.setState({ items: json.results })
  }

  render() {
    const items = this.state.items;
    const filteredData = items.results.filter(createFilter(this.state.searchTerm, items.results))

    return (
      <div>
        <SearchInput className="search-input" onChange={this.searchUpdated} />
        <div className="row">
            {filteredData.map((item, i) =>
              <div className="col-md-4" key={i}>
                <a href={item.url}>{item.name}</a>
                <p>Caractéristiques :</p>
                <ul>
                  <li>Année de naissance : {item.birth_year}</li>
                  <li>Taille : {item.height} cm</li>
                  <li>Masse : {item.mass}</li>
                  <li>Couleur des yeux : {item.eye_color}</li>
                  <li>Couleur de cheveux : {item.hair_color}</li>
                  <li>Couleur de peau : {item.skin_color}</li>
                </ul>
              </div>
            )}
        </div>
      </div>
    )
  }
  searchUpdated (term) {
    this.setState({searchTerm: term})
  }
}

export default App;
  

Вы пытаетесь получить доступ к results свойству this.state.items , которое объявлено как пустой массив. Вы должны объявить items следующим образом:

 this.state = {
  items: { results: [] },
  searchTerm: '',
}
...
const items = this.state.items;
items.results.filter(createFilter(this.state.searchTerm, items.results))
  

или просто объявите results как массив и используйте его:

 this.state = {
  results: [],
  searchTerm: '',
}
...
this.state.results.filter(createFilter(this.state.searchTerm, this.state.results))
  

У вас синтаксическая ошибка. Вы пытаетесь получить доступ к result ключу в массиве.:

 // items is an array, arrays don't have keyword result
const filteredData = items.results.filter(createFilter(this.state.searchTerm, items.results))