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 是不正确的。

searchChange 未定义 no-undef

1 个答案: