在React中显示过滤的数据

import React, { Component } from 'react';

class FilteredData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [], // 存储所有的数据
      filter: '', // 过滤条件
    };
  }

  componentDidMount() {
    // 在组件挂载后，可以通过网络请求或其他方式获取数据，并更新state中的data数组
    // 示例代码：
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }))
      .catch(error => console.log(error));
  }

  handleFilterChange = (event) => {
    // 监听用户输入的过滤条件，并更新state中的filter
    this.setState({ filter: event.target.value });
  }

  render() {
    const { data, filter } = this.state;

    // 根据过滤条件筛选需要显示的数据
    const filteredData = data.filter(item => item.name.includes(filter));

    return (
      <div>
        <input type="text" value={filter} onChange={this.handleFilterChange} />
        <ul>
          {filteredData.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default FilteredData;