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

Question

我刚接触 stackoverflow 并做出反应，我遇到了一些问题。 这是代码。

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());
})

您在使用 searchFiled 时弄错了 searchField。

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