类型错误：无法在反应中读取未定义的属性“toLowerCase”

Question

我正在编写一个程序，其中的项目在表格组件中打印并给出了一个搜索栏。 最初我把所有的组件都写成了一个组件（App.js）。 但是现在我试图将其拆分为 App、Table 和 Search 在通过 props 将值打印到 Table 时出现错误：

TypeError: Cannot read property 'toLowerCase' of undefined

代码：

应用程序.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>
    )

  }
}

导出默认应用程序；

表.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;

搜索.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;

Answer 1

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

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