无法读取未定义的 React 的 属性 'toLowerCase'

Question

我是 Whosebug 和 React 的新手，我遇到了一些问题。 这是代码。

onSearchChange = (event) => {
  this.setState({ searchfiled: event.target.value })
}

render() {
  const filteredRobots = this.state.robots.filter(robots => {
    return robots.name.toLowerCase().includes(this.state.searchfiled.toLowerCase());
  })
  return(
    <div className='tc'>
      <h1>Robofriends</h1>
      <SearchBox searchChange={this.onSearchChange}/>
      <CardList robots={filteredRobots}/>
    </div>
  );
}

我收到此错误类型错误：无法读取未定义的 属性 'toLowerCase'。 谁能帮帮我？

Answer 1

我知道了，您在过滤器中输入错误。你得到了这个：

const filteredRobots = this.state.robots.filter(robots =>{
return robots.name.toLowerCase().includes(this.state.searchfiled.toLowerCase());
})

应该是这样的：

const filteredRobots = this.state.robots.filter(robot =>{
return robot.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
})

你是不是把 searchField 误认为是 searchFiled。

此外，在过滤器功能中，您使用的机器人与导入的 "robots" 同名，这可能会导致错误。改用机器人。