使用React过滤对象时发生问题

时间:2019-05-19 10:15:25

标签: reactjs

代码更新了搜索字段,但是当我将其与另一个字段一起使用时 功能不起作用。

下面一行显示控制台中的值, console.log(this.state.seachfield,'seachfield') 但不适用于filterRobots。

filterRobots运作正常 如果我使用event.target.value而不是this.state.searchfield。

//imports 
import React , {Component}from 'react';
import {robots} from './robots';
import CardList from './CardList';
import Searchbox from './Searchbox';

//main app
class App extends Component{
  constructor(){
    super()
    this.state={
      robots : robots,
      searchfield : ""
    }
  }
  //the on change event, update searcfield.
  OnSearchChange =(event) =>{
     this.setState({seachfield : event.target.value})
}

  render(){
    console.log(this.state.seachfield, 'seachfield');
    //filter by name
    const filteredRobots = this.state.robots.filter(robot =>{
      return robot.name.toLowerCase().includes(this.state.searchfield)
      })
      console.log(filteredRobots);


    return(
      <div className="tc">
        <h1> Robots Title </h1>
        <Searchbox searchchange={this.OnSearchChange}/>
        <CardList robots={filteredRobots}/>
      </div>
    );
  }
}
export default App;

0 个答案:

没有答案