ReactJS多重过滤

import React, { Component } from 'react';

class FilteredList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filter1: '',
      filter2: '',
      filteredData: []
    };
  }

  filterData = (data) => {
    const { filter1, filter2 } = this.state;
    // 根据过滤条件进行筛选
    let filteredData = data.filter(item => {
      return item.property1.includes(filter1) && item.property2.includes(filter2);
    });
    this.setState({ filteredData });
  }

  componentDidMount() {
    // 模拟异步获取数据
    const data = [
      { property1: 'value1', property2: 'value2' },
      { property1: 'value3', property2: 'value4' },
      // ...
    ];
    this.filterData(data);
  }

  componentDidUpdate(prevProps, prevState) {
    // 监听过滤条件的变化，当条件发生变化时，重新进行筛选
    if (prevState.filter1 !== this.state.filter1 || prevState.filter2 !== this.state.filter2) {
      this.filterData(data);
    }
  }

  handleFilter1Change = (event) => {
    this.setState({ filter1: event.target.value });
  }

  handleFilter2Change = (event) => {
    this.setState({ filter2: event.target.value });
  }

  render() {
    const { filteredData } = this.state;
    return (
      <div>
        <input type="text" value={this.state.filter1} onChange={this.handleFilter1Change} />
        <input type="text" value={this.state.filter2} onChange={this.handleFilter2Change} />
        <ul>
          {filteredData.map(item => (
            <li key={item.id}>{item.property1} - {item.property2}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default FilteredList;