Как отфильтровать данные API в React

Question

Итак, я пытаюсь отфильтровать данные API звездных войн через окно поиска и до сих пор получил это:

class Card extends Component {
  constructor(){
    super()
    this.state = {
      jedi: [],
      searchfield: ''
    }
  }


  // Loop through API
  componentDidMount(){
    fetch('https://swapi.co/api/people/1')
      .then(response => { return response.json()})
      .then(people => this.setState({jedi:people}))
  }

  onSearchChange = (event) => {
    this.setState({searchfield: event.target.value})
    console.log(event.target.value)
  }   

  render() {
    const {jedi, searchfield} = this.state;
    const filteredCharacters = jedi.filter(jedi => {
      return jedi.name.toLowerCase().includes(searchfield.toLowerCase());
    })
  }
}

Это мой компонент SearchBox

import React from 'react';

const SearchBox = ({searchfield, searchChange})=> {
  return (
    <div className= 'searchbox1'>
      <input className = 'searchbox2' 
        type = 'search' 
        placeholder = 'search character'
        onChange = {searchChange} 
        />
    </div>
  )
}

export {SearchBox};

Эторендеринг в основном компоненте приложения

render() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={lightsaber} className="App-logo" alt="logo"/>
        <h1 className="App-title">
          Star Wars Character App w/API
        </h1>
      </header>  

      <SearchBox searchChange= {this.onSearchChange} />

      <div className = 'allcards'>
        <Card jedi = {this.filteredCharacters}/>
      </div>
    </div>
  ); 
}

Он продолжает выдавать мне ошибку «jedi.filter не является функцией». Сначала я рассчитывал, что фильтр работает только с массивами, а мои данные были строками, что яиспользуйте jedi.split('').filter. Но, похоже, это не сработало, так как я только что получил "jedi.split is not function". Что происходит?

Answer 1

После запуска кода эта ссылка 'https://swapi.co/api/people/1' возвращает один объект (Люк Скайуокер).Вы не можете использовать .filter () для объекта, он предназначен для массивов данных.

{name: "Luke Skywalker", height: "172", mass: "77", hair_color: "blond", skin_color: "fair", …}

Когда я изменяю URL 'https://swapi.co/api/people/' и удаляю 1, я получаю объект сдругой массив объектов внутри results.

Я предполагаю, что вы хотите найти список джедаев.Если вы хотите, чтобы список был возвращен в API, вы должны углубиться в этот объект внутри результатов.Поэтому вам нужно реорганизовать вашу выборку следующим образом:

.then(people => this.setState({ jedi:people.results }))

Это возвращает 10 объектов внутри массива.

Как только у вас есть массив этих объектов, вы можете использовать библиотеку lodashотфильтровать.npm i lodash и укажите его как import _ from 'lodash'.

Тогда в вашем рендере сразу после деструктуры вы можете запустить следующий фильтр.

const filtered = _.filter(jedi, (item) => {
   return item.name.indexOf(searchfield) > -1
})

console.log(filtered)

Я предполагаю, что после этого вы будетевозвращая список отфильтрованных джедаев в пользовательский интерфейс

Я жестко запрограммировал «Люк» в своем состоянии поля поиска, и он успешно возвратил 1 джедая