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>
  ); 
}

它一直给我错误＆＃34; jedi.filter不是一个功能＆＃39;。最初我认为，因为过滤器仅适用于数组，而我的数据是字符串，我使用jedi.split('').filter。但这似乎没有用，因为我刚刚得到了＃34; jedi.split不是一个功能＆＃34;。发生了什么事？

Answer 1

运行代码后，此链接＆＃39; https://swapi.co/api/people/1＆＃39;返回一个对象（Luke Skywalker）。您不能在对数据数组使用的对象上使用.filter（）。

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

当我更改网址时，https://swapi.co/api/people/＆＃39;并删除1我在results内使用另一个对象数组接收一个对象。

我假设您要搜索Jedis列表。如果您想要在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)

我假设在此之后您将把过滤后的Jedis列表返回给UI

我硬编了“Luke＆＃39;在我的搜索字段状态中，它成功返回1个Jedi

如何在React中过滤api数据

1 个答案: