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函数引起的，它可以正常工作。它很可能与robots数据集有关。我在这里对filter函数进行了一些修改。

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来呈现已过滤的数据集。看看。

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

1 个答案: