Reactjs 正在进行反应搜索，但获取错误类型错误：无法读取属性'；过滤器'；未定义的

我正在进行react搜索，但获取错误类型错误：无法读取未定义的属性“filter”。我正在使用定制API的react。我正在使用输入字段在键入后自动完成。我也在使用react material ui框架

下面的代码获取错误类型错误：无法读取未定义的属性“筛选器”

import React, { Component } from 'react'
import ApiService from "../../service/ApiService";
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Typography from '@material-ui/core/Typography';
type AppProps = {}
type AppState = {}
class AddUserComponent extends Component<any,any>{

    constructor(props: any){
        super(props);
        this.state ={
            searchArray:[],

        }
        this.saveUser = this.saveUser.bind(this);
        this.searchScripData = this.searchScripData.bind(this); 
    }
    componentDidMount() {
        this.searchScripData(this.requesDATA2());
     }

     requesDATA2()
     {
         let data1= { "symbolOrName":"TATA"};
         return data1;
     }









    saveUser = (e: any) => {
        e.preventDefault();
        let user = {username: this.state.username, password: this.state.password, firstName: this.state.firstName, lastName: this.state.lastName, age: this.state.age, salary: this.state.salary};
        ApiService.addUser(user)
            .then(res => {
                this.setState({message : 'User added successfully.'});
                this.props.history.push('/users');
            });
    }

    searchScripData(searchScrip: any) {
        ApiService.searchScripDataList(searchScrip)
            .then((res) => {
               this.setState({searchArray: res.data.data} )
            });
    }

    //onChange = (e: any) =>
       // this.setState({ [e.target.name]: e.target.value });





//search scrip data
onChange = (searchScrip: any) => {
    console.log('onChanges');

    const { options } = this.props;
    const userInput = searchScrip.currentTarget.value;

    const searchArray = options.filter(
      (optionName: string) =>
        optionName.toLowerCase().indexOf(userInput.toLowerCase()) > -1
    );

    this.setState({
      activeOption: 0,
      searchArray,
      showOptions: true,
      userInput: searchScrip.currentTarget.value
    });
  };

  onClick = (searchScrip: any) => {
    this.setState({
      activeOption: 0,
      searchArray: [],
      showOptions: false,
      userInput: searchScrip.currentTarget.innerText
    });
  };
  onKeyDown = (searchScrip: any) => {
    const { activeOption, searchArray } = this.state;

    if (searchScrip.keyCode === 13) {
      this.setState({
        activeOption: 0,
        showOptions: false,
        userInput: searchArray[activeOption]
      });
    } else if (searchScrip.keyCode === 38) {
      if (activeOption === 0) {
        return;
      }
      this.setState({ activeOption: activeOption - 1 });
    } else if (searchScrip.keyCode === 40) {
      if (activeOption === searchArray.length - 1) {
        console.log(activeOption);
        return;
      }
      this.setState({ activeOption: activeOption + 1 });
    }
  };

//search scrip data


    render() {

//search scrip data
            const {
              onChange,
              onClick,
              onKeyDown,

              state: { activeOption, searchArray, showOptions, userInput }
            } = this;
            let optionList;
            if (showOptions && userInput) {
              if (searchArray.length) {
                optionList = (
                  <ul className="options">
                    {searchArray.map((optionName: any, index: any) => {
                      let className;
                      if (index === activeOption) {
                        className = 'option-active';
                      }
                      return (
                        <li className={className} key={optionName} onClick={onClick}>
                          {optionName}
                        </li>
                      );
                    })}
                  </ul>
                );
              } else {
                optionList = (
                  <div className="no-options">
                    <em>No Option!</em>
                  </div>
                );
              }
            }

//search scrip data

        return(
            <div>
{this.state.searchArray.map((row: any, key: any) => (
                            <TableRow>
                                <TableCell align="left">{row.symbol} asdasdsa</TableCell>
                                <TextField id="filled-search"  label="Search field" type="search" variant="filled" />
                                </TableRow>
                        ))}
        <div className="search">
          <input
            type="text"
            className="search-box"
            onChange={onChange}
            onKeyDown={onKeyDown}
            value={userInput}
          />
          <input type="submit" value="" className="search-btn" />

        {optionList}
        </div>
                <Typography variant="h4" style={style}>Add User</Typography>

    </div>
        );
    }
}
const formContainer = {
    display: 'flex',
    flexFlow: 'row wrap'
};

const style ={
    display: 'flex',
    justifyContent: 'center'

}

export default AddUserComponent;

import React，{Component}来自“React”
从“../../service/ApiService”导入ApiService；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Typography”导入排版；
类型AppProps={}
类型AppState={}
类AddUserComponent扩展组件{
构造器（道具：任何）{
超级（道具）；
这个州={
searchArray:[]，
}
this.saveUser=this.saveUser.bind（this）；
this.searchScripData=this.searchScripData.bind（this）；
}
componentDidMount（）{
this.searchScripData（this.requesDATA2（））；
}
请求数据2（）
{
让data1={“symbolOrName”：“TATA”}；
返回数据1；
}
saveUser=（e:any）=>{
e、 预防默认值（）；
let user={username:this.state.username，password:this.state.password，firstName:this.state.firstName，lastName:this.state.lastName，age:this.state.age，salary:this.state.salary}；
ApiService.addUser（用户）
。然后（res=>{
this.setState（{消息：“用户已成功添加”。}）；
this.props.history.push（'/users'）；
});
}
searchScripData（searchScrip:any）{
ApiService.searchScripDataList（searchScrip）
。然后（（res）=>{
this.setState（{searchArray:res.data.data}）
});
}
//onChange=（e:any）=>
//this.setState（{[e.target.name]：e.target.value}）；
//搜索纸条数据
onChange=（searchScrip:any）=>{
log（'onChanges'）；
const{options}=this.props；
const userInput=searchScrip.currentTarget.value；
const searchArray=options.filter(
（选项名称：字符串）=>
optionName.toLowerCase（）.indexOf（userInput.toLowerCase（））>-1
);
这是我的国家({
活动选项：0，
搜索数组，
展示选项：正确，
userInput:searchScrip.currentTarget.value
});
};
onClick=（searchScrip:any）=>{
这是我的国家({
活动选项：0，
searchArray:[]，
showOptions:false，
用户输入：searchScrip.currentTarget.innerText
});
};
onKeyDown=（searchScrip:any）=>{
const{activeOption，searchArray}=this.state；
如果（searchScrip.keyCode===13）{
这是我的国家({
活动选项：0，
showOptions:false，
userInput:searchArray[activeOption]
});
}else if（searchScrip.keyCode==38）{
如果（activeOption==0）{
回来
}
this.setState（{activeOption:activeOption-1}）；
}else if（searchScrip.keyCode==40）{
if（activeOption==searchArray.length-1）{
log（activeOption）；
回来
}
this.setState（{activeOption:activeOption+1}）；
}
};
//搜索纸条数据
render（）{
//搜索纸条数据
常数{
一旦改变，
onClick，
onKeyDown，
状态：{activeOption，searchArray，showOptions，userInput}
}=这个；
让选择者；
if（显示选项和用户输入（&U）{
if（searchArray.length）{
选项列表=(

{searchArray.map（（optionName:any，index:any）=>{
让类名；
如果（索引===activeOption）{
className='选项处于活动状态'；
}
返回(

{optionName}

);
})}

);
}否则{
选项列表=(
别无选择！
);
}
}
//搜索纸条数据
返回(
{this.state.searchArray.map（（行：any，键：any）=>(
{row.symbol}asdasdsa
))}
{选项列表}
添加用户
);
}
}
const formContainer={
显示：“flex”，
flexFlow:“行换行”
};
常量样式={
显示：“flex”，
为内容辩护：“中心”
}
导出默认AddUserComponent；

确保从父组件正确传递道具。对于空安全，请继续使用options？.filter而不是options。filter

问题来自

options

未传递到

组件，这就是它未定义的原因。因此，无法对其调用

.filter（）

。您能分享一下您是如何将道具传递给

组件的，或者您在哪里使用道具的吗？如何添加请指导我我是新的react，尝试使用

，但在

选项中

属性传递父组件中的数组，而不是我示例中的空数组。