Javascript TypeError:无法读取属性'；toLowerCase'；在反应中未定义的

我正在编写一个程序，其中项目打印在一个表组件中，并给出一个搜索栏。最初，我将所有组件都写入一个组件（App.js）。 但现在我正试图将其分为应用程序、表格和搜索 通过道具将值打印到表中时，我遇到一个错误：

TypeError: Cannot read property 'toLowerCase' of undefined

代码：

App.js

import React, { Component } from 'react';
import './App.css';
import Table from './components/Table';
import Search from './components/Search';

const list = [
  {
  title: 'React',
  url: 'https://facebook.github.io/react/',
  author: 'Jordan Walke',
  num_comments: 3,
  points: 4,
  objectID: 0,
  },
  {
  title: 'Redux',
  url: 'https://github.com/reactjs/redux',
  author: 'Dan Abramov, Andrew Clark',
  num_comments: 2,
  points: 5,
  objectID: 1,
  },
  {
    title: 'Redux',
    url: 'https://github.com/reactjs/redux',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5,
    objectID: 2,
    },
    {
      title: 'Redux',
      url: 'https://github.com/reactjs/redux',
      author: 'Dan Abramov, Andrew Clark',
      num_comments: 2,
      points: 5,
      objectID: 3,
      },
  ];

  //will print the above data through map function
  //iteratre through item object and will print each property
  //will print out 
class App extends Component {
  constructor(){
    super();
    this.state={
      list,
      searchText:''
    }
    this.onDismiss=this.onDismiss.bind(this);
    this.onSearchChange=this.onSearchChange.bind(this);
    //this.isSearched=this.isSearched.bind(this);
  }

  //to add a delete button
  onDismiss=(id)=>{
    //filter out item array and return results with no matched id
    const deleteList=this.state.list.filter(item=>item.objectID!==id);
    //setting state of list to lastest deleteList
    this.setState({
      list:deleteList
    })  
  }
  //to add a search bar
  onSearchChange=(e)=>{
    //set state to value in search bar
    this.setState({
      [e.target.name]:e.target.value
    })
  }


  render() {
    const {list,searchText}=this.state;
    return(
      <div>
       <Table
       list={list}
       onDismiss={this.onDismiss}/>
       <Search
       searchText={searchText}
       onSearchChange={this.onSearchChange}/>
      </div>
    )

  }
}

import React，{Component}来自'React'；
导入“/App.css”；
从“./components/Table”导入表；
从“./components/Search”导入搜索；
常数列表=[
{
标题：“反应”，
网址：'https://facebook.github.io/react/',
作者：《乔丹·沃克》，
num_评论：3，
要点：4，
对象ID:0，
},
{
标题：“Redux”，
网址：'https://github.com/reactjs/redux',
作者：“丹·阿布拉莫夫，安德鲁·克拉克”，
num_评论：2，
要点:五,，
目标1,，
},
{
标题：“Redux”，
网址：'https://github.com/reactjs/redux',
作者：“丹·阿布拉莫夫，安德鲁·克拉克”，
num_评论：2，
要点:五,，
目标二,，
},
{
标题：“Redux”，
网址：'https://github.com/reactjs/redux',
作者：“丹·阿布拉莫夫，安德鲁·克拉克”，
num_评论：2，
要点:五,，
目标三,，
},
];
//将通过地图功能打印上述数据
//迭代项对象并打印每个属性
//将打印出来
类应用程序扩展组件{
构造函数（）{
超级（）；
这个州={
列表
搜索文本：“”
}
this.onDismiss=this.onDismiss.bind（this）；
this.onSearchChange=this.onSearchChange.bind（this）；
//this.isSearched=this.isSearched.bind（this）；
}
//添加删除按钮的步骤
onDismiss=（id）=>{
//筛选出项数组并返回没有匹配id的结果
const deleteList=this.state.list.filter（item=>item.objectID！==id）；
//将列表状态设置为最新的deleteList
这是我的国家({
列表：删除列表
})  
}
//添加搜索栏的步骤
onSearchChange=（e）=>{
//在搜索栏中将状态设置为值
这是我的国家({
[e.target.name]：e.target.value
})
}
render（）{
const{list，searchText}=this.state；
返回(
)
}
}

导出默认应用程序

Table.js

import React, { Component } from 'react';

class Table extends Component {


  render() {
    const {list,searchText}=this.props;
    return(
        <div>

       {/*Filter out item title and search title and give away results from item array */}
        {list.filter((item)=>{
          {/*The includes() method determines whether an array includes a certain value among its entries
          , returning true or false as appropriate. */}
          return item.title.toLowerCase().includes(searchText.toLowerCase());}).map((item)=>{

            return(

            <div key={item.objectID}>
                  {item.objectID}
                  {item.title}
                  <span>{item.author}</span>
                  <span>{item.num_comments}</span>
                  <span>{item.points}</span>
                <button onClick={()=>this.onDismiss(item.objectID)}>delete</button>
            </div>

          )})}
      </div>
    )

  }
}

export default Table;

import React，{Component}来自'React'；
类表扩展组件{
render（）{
const{list，searchText}=this.props；
返回(
{/*筛选出项目标题和搜索标题，并给出项目数组的结果*/}
{list.filter（（项）=>{
{/*includes（）方法确定数组的条目中是否包含某个值
，根据需要返回true或false.*/}
return item.title.toLowerCase（）.includes（searchText.toLowerCase（））；}.map（（item）=>{
返回(
{item.objectID}
{item.title}
{item.author}
{item.num_comments}
{item.points}
this.onDismiss（item.objectID）}>delete
)})}
)
}
}
导出默认表；

Search.js

import React, { Component } from 'react';

class Search extends Component {


  render() {
    const {searchText,onSearchChange}=this.props;
    return(
      <div>
          <input name="searchText" value={searchText}onChange={onSearchChange} type="text"></input>
      </div>
    )

  }
}

export default Search;

import React，{Component}来自'React'；
类搜索扩展组件{
render（）{
const{searchText，onSearchChange}=this.props；
返回(
)
}
}
导出默认搜索；

已解决 我没有将searchText传递给表，这就是它给出错误的原因

<Table
       list={list}
       onDismiss={this.onDismiss}
       searchText={searchText}/>

不是问题所在，而是在构造函数中使用

.bind

，或者使用带有箭头函数的类属性，但不能同时使用这两个。两个

toLowerCase

调用中的哪一个会触发错误？