searchChange 未定義 no-undef

Question

SearchBox.js 文件是：

import React from 'react';

const SearchBox = ({ searchfield, searchChanger}) => {
return (
    <div className='pa2'>
        <input 
            className='pa3 b--green bg-light-blue'
            type='search'
            placeholder='search robots'
            onChange={searchChange}
        />
    </div>
);
}

export default SearchBox;

App.js 文件是：

import React, { Component } from 'react';
import CardList from './CardList';
import SearchBox from './SearchBox';
import { robots } from './robots';
import './App.css';
class App extends Component {
    constructor() {
        super()
        this.state = {
            robots: robots,
            searchfield:''
        }
    }

    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(users => {this.setState({ robots: robots})});

    }

    onSearchChange = (event) => {
        this.setState({ searchfield: event.target.value })
    }

    render() {
        const filteredRobots = this.state.robots.filter(robots => {
           return  robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
        })
        if (robots.length ===0) {
        return <h1>Loading</h1>
       }
        else {
          return (  
              <div className='tc'>
                    <h1 className='f1'>RoboFriends</h1>
                    <SearchBox searchChange={this.onSearchChange}/>
                    <CardList robots={filteredRobots} />
              </div>
            );
        }
    }   
}


export default App;

我可以通過更改 App.js 文件中的導入順序來擺脫這個錯誤，但后來無論我做什么都會顯示這個錯誤？ 如果我有任何打字問題，請幫忙，如果沒有，那是什么問題

Answer 1

你的搜索框應該是：

const SearchBox = ({ searchfield, searchChange}) => {
return (
    <div className='pa2'>
        <input 
            className='pa3 b--green bg-light-blue'
            type='search'
            placeholder='search robots'
            onChange={searchChange}
        />
    </div>
);
}

export default SearchBox;

在您的道具中有不正確的 searchChanger。