反应 - 为什么我的过滤方法不起作用

Question

我试图简单地为应用程序创建搜索和结果功能。 输入值应反映 CardList 数组中列出的组件。 过滤器似乎没有更新 CardList。 我已经记录了沿途的步骤，我得出的结论是它是我设置的过滤器。 我似乎无法弄清楚为什么它不会过滤列表。

import React, {Component} from 'react';
import CardList from './CardList';
import {robots} from './robots';
import './index.css';

class App extends Component {
  constructor() {
    super()
    this.state = {
      robots: robots,
      searchfield: ''
    }
  }

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

  render() {
    const filteredRobots = this.state.robots.filter(robot => {
      return robot.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
    });

    return (
      <div className="appAlign">
        <h1 className="appTitle">RoboFriends</h1>
        <input
          className="searchBox"
          type="search"
          placeholder="Search Robots"
          onChange={this.onSearchChange}
        />
        <CardList robots={filteredRobots} />
      </div>
    );
  }

  }


export default App;

Answer 1

该错误不是由filter function 引起的，因为我已经对其进行了测试并且可以正常工作。 它很可能与robots数据集有关。 我在这里稍微修改了filter function。

import React, { Component } from "react";
import CardList from "./CardList";
import { robots } from "./robots";

class App extends Component {
  constructor() {
    super();
    this.state = {
      robots: robots,
      searchfield: ""
    };
  }

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

  render() {
    const filteredRobots = this.state.robots.filter(robot =>
      robot.name.toLowerCase().includes(this.state.searchfield.toLowerCase())
    );

    return (
      <div className="appAlign">
        <h1 className="appTitle">RoboFriends</h1>
        <input
          className="searchBox"
          type="search"
          placeholder="Search Robots"
          onChange={this.onSearchChange}
        />
        <CardList robots={filteredRobots} />
      </div>
    );
  }
}

export default App;

我用您的代码制作了一个沙箱，其中包含一个示例robots数据和一个呈现过滤数据集的Card 。 看一看。