Javascript react中的render方法不允许从axios调用中筛选数据，空检查不起作用。看起来很容易解决？

我有一个从axios调用中获取的大量数据列表，我希望能够进行快速筛选来筛选我的数据，并且只显示搜索栏中包含的内容。出于某种原因，当我试图将我的道具设置为一个变量，然后过滤它时，我说它是未定义的。所以我试着做一个简单的空检查，然后做我的js，但仍然不起作用。我认为问题的一部分是数据被调用的时间和渲染方法进行过滤的速度？提前谢谢

class App extends Component {

   constructor(){
     super();
     this.state={
       filteredData: null,
       input: ''
     };
   }

   componentWillMount = () => {
    this.props.GetAllData();
   }

   onChange=(txt)=>{
     this.setState({input: txt});
   }

   render() {

     const filteredData = !!this.props.people ? this.props.people.filter(card =>{
        return card.name.toUpperCase.includes(this.state.input.toUpperCase())
        }) : null

   return(

    <SearchBar cards={this.props.people} inputTxt={this.onChange}/>
    {!!this.props.people ? this.props.people.map(i => <Card person={i} key={i.created}/>) : null}
)
   }

类应用程序扩展组件{
构造函数（）{
超级（）；
这个州={
filteredData:null，
输入：“”
};
}
组件将装入=（）=>{
this.props.GetAllData（）；
}
onChange=（txt）=>{
this.setState（{input:txt}）；
}
render（）{
const filteredData=！！this.props.people？this.props.people.filter（卡片=>{
return card.name.toUpperCase.includes（this.state.input.toUpperCase（））
})：null
返回(
{！！this.props.people？this.props.people.map（i=>）：null}
)
}

componentWillMount=（）=>{

应该是

componentWillMount（）{

。它是类上的一个方法，而不是属性。此外，还应该使用

componentDidMount

。此外，如果启用了类字段，则没有理由使用构造函数。只需执行

状态={

与其他字段一样位于类的右侧。而且

toUpperCase

是一个方法，因此它应该是

card.name.toUpperCase（）。包括
也不能在React的渲染中返回子级。这些子级需要包装在
或。