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

Question

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

您使用searchFiled弄错了searchField。

此外，在过滤功能中，你使用的机器人与进口的"机器人"同名，这可能会导致错误。使用机器人代替。