时间戳

首页 > 解决方案 > 在反应应用程序上工作并继续收到错误 Expected `onChange` listener to be a function，而不是得到 `object` 类型的值

reactjs - 在反应应用程序上工作并继续收到错误 Expected `onChange` listener to be a function，而不是得到 `object` 类型的值

问题描述

对我来说，它似乎正在传递一个函数，我完全不知道如何解决这个错误。我知道将此代码直接传递给 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;

标签： reactjs

解决方案

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

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

推荐阅读