Javascript 未捕获类型错误：this.state.pokemon.filter不是函数？

试图通过api返回的数据数组获取pokeapi和map。我将状态设置为空数组，然后继续尝试获取api并从响应接收数据，然后将其添加到我的口袋妖怪状态

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

        componentDidMount() {
            fetch('https://pokeapi.co/api/v2/pokemon/')
                .then(response => response.json())
                .then(pokemon => this.setState({ pokemon: pokemon }))
                .catch(err => console.log(err));    
            }

        onSearchChange = (e) => {
            this.setState({ searchfield: e.target.value })
        }

        render() {
            const filteredPokemon = this.state.pokemon.filter(poki => {
                return 
                   poki.name.toLowerCase().includes
                   (this.state.searchfield.toLowerCase());
            })
            if (!this.state.pokemon.length) {
                return <h1>Loading</h1>
            } else {
                return (
                    <div className='tc'>
                        <h1>Pokemon</h1>
                        <SearchBox searchChange={this.onSearchChange} 
                        />
                        <Scroll>
                            <CardList pokemon={filteredPokemon} />
                        </Scroll>
                    </div> 
                );
            }
        }

类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
口袋妖怪：[]，
搜索字段：“”
}
}
componentDidMount（）{
取（'https://pokeapi.co/api/v2/pokemon/')
.then（response=>response.json（））
.then（pokemon=>this.setState（{pokemon:pokemon}））
.catch（err=>console.log（err））；
}
onSearchChange=（e）=>{
this.setState（{searchfield:e.target.value}）
}
render（）{
const filteredPokemon=this.state.pokemon.filter（poki=>{
返回
poki.name.toLowerCase（）包括
（this.state.searchfield.toLowerCase（））；
})
如果（！this.state.pokemon.length）{
回装
}否则{
返回(
精灵宝可梦
);
}
}

此api调用导致将

This.state.pokemon

设置为对象而不是数组：

fetch('https://pokeapi.co/api/v2/pokemon/')
   .then(response => response.json())
   .then(pokemon => this.setState({ pokemon: pokemon }))
   .catch(err => console.log(err));  

我相信您正在尝试筛选

results

属性，该属性是一个数组？在本例中，请将

this.state.pokemon

设置为

pokemon.results

：

fetch('https://pokeapi.co/api/v2/pokemon/')
   .then(response => response.json())
   .then(pokemon => this.setState({ pokemon: pokemon.results }))
   .catch(err => console.log(err)); 

您可能已经调试了fetch以查看如下对象：

fetch('https://pokeapi.co/api/v2/pokemon/')
   .then(response => response.json())
   .then(pokemon => console.log(pokemon))
   .catch(err => console.log(err)); 

---

从api接收的实际数据

{
  "count":949,
  "previous":null,
  "results": [
    {
      "url":"https:\/\/pokeapi.co\/api\/v2\/pokemon\/1\/",
      "name":"bulbasaur"
    },
    {
      "url":"https:\/\/pokeapi.co\/api\/v2\/pokemon\/2\/",
      "name":"ivysaur"
    }
  ]
}

更改此项：

fetch('https://pokeapi.co/api/v2/pokemon/')
  .then(response => response.json())
  .then(pokemon => this.setState({ pokemon: pokemon }))
  .catch(err => console.log(err));

到

---

你能

console.log（this.state.pokemon）

并给我们看结果吗？我实际上刚刚解决了这个问题。当我把我的pokemon状态设置为pokemon的结果时，它返回的是一个对象而不是数组，所以我简单地把.then（pokemon=>this.setState（{pokemon pokemon:[pokemon]}））不过，感谢您的帮助！@user80137，它只是将对象添加为新数组的单个元素-请参阅我的答案

fetch('https://pokeapi.co/api/v2/pokemon/')
  .then(response => response.json())
  .then(({results}) => this.setState({ pokemon: results }))
  .catch(err => console.log(err));