处理react应用程序并继续获取错误.预期"onChange"侦听器为函数，而得到的却是"

Question

对我来说，似乎有一个函数正在传递，我完全不知道该怎么修复这个错误。我知道直接将此代码传递给onChanged是可行的，但由于某种原因，当onSearchChange方法作为参数传递给Searchbox时，它认为它是一个对象

这是有问题的代码

import "./tachyons";
import Searchbox from "./Searchbox";
import CardList from "./CardList";
import {robots} from "./robots";

class App extends React.Component {
constructor(){
super();
this.state = {
robots:robots,
searchfield:""
}
}
onSearchChange = (event)=>{
//console.log(event);
const filteredRobots = this.state.robots.filter(robots=>{
return robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
});
console.log(filteredRobots);
}
render () {
return (
<div className='tc'>
<h1 className='f1'>RoboFriends</h1>
<Searchbox searchChange = {this.onSearchChange}/>
<CardList robots={this.state.robots}/>
</div>
);
}
}
export default App;

import App from "./App"
const Searchbox  = (searchfield, searchChange)=>{
return (
<div className="pa2">
<input
className = "pa3 ba b--green bg-lightest-blue"
type="search"
placeholder="search robots"
onChange = {searchChange}
/>
</div>
);
}
export default Searchbox;

Answer 1

您的搜索框组件没有破坏道具：

const Searchbox = (searchfield, onSearchChange)=>

与。

const Searchbox = ({searchfield, onSearchChange})=>

Answer 2

您在Searchbox组件中使用道具的方式错误。你需要这样更新：

const Searchbox  = ({searchfield, onSearchChange})=>{...}