为什么状态在React TypeScript中首先返回空并且类型'never'不存在属性？

Posted 2021-04-13

我正在尝试使用打字稿来处理状态。在“返回monster.name.toLowerCase（）。includes（search）”行中，我收到此错误消息“类型'never'不存在属性'name'。”可以在https://jsonplaceholder.typicode.com/users处找到该API。我在做错她的事，或者我想念或不做的事。

import React, { Component } from 'react';
import './App.css';
import CardList from './Components/CardList/CardList';

interface IProps {
  superhero: string;
}

interface IState {
  monsters: [],
  search: string,
}

class App extends Component<IProps, IState> {

  state: IState;

  constructor(props: IProps){

    super(props);

    this.state = {
      monsters: [],
      search: '',
    }

  }

  componentDidMount(){
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(users => this.setState({monsters: users}))
  }

  render(){

    interface IContact {
      id: number;
      name: string;
  }

    const searchMonsters = (e: any) => {
      console.log(e.target.value)
      this.setState(
        { 
          search: e.target.value
        }
      );

    }

    const { monsters, search } = this.state;

    //return monster.name.toLowerCase().includes(search) giving error Property 'name' does not exist on type 'never'

    const filteredMonsters = monsters.filter( monster => {
      return monster.name.toLowerCase().includes(search)
    });


    console.log(this.state.monsters);


    return (
      <div className="App">
        <input type="search" placeholder="Search Monster" onChange={searchMonsters}/>
        <CardList monsters={filteredMonsters}/>
      </div>
    );

  }

}

export default App;

答案

您不是要将monster声明为any类型吗？

const filteredMonsters = monsters.filter((monster: any) => {
  return monster.name.toLowerCase().includes(search)
});

另一答案

您应指定数组类型

interface Monster{
  name: string,
  //...
}
interface IState {
  monsters: Monster[],
  search: string,
}