Question

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

2020-04-10

1645

reactjs undefined lowercase

我是 stackoverflow 和 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>
  );
}

我收到此错误 TypeError：无法读取未定义的属性“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 与导入的“robots”同名，这可能会导致错误。请改用 robot。