过滤数据并将其返回给“永久”数据- react

import React, { Component } from 'react';

class FilteredData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filterValue: '',
      filteredData: [],
      permanentData: []
    };
  }

  componentDidMount() {
    // 在这里加载初始数据并将其存储在permanentData中
    // 可以通过调用API或从其他来源获取数据
    const initialData = ['数据1', '数据2', '数据3'];
    this.setState({ permanentData: initialData });
  }

  handleFilterChange = (event) => {
    const { permanentData } = this.state;
    const filterValue = event.target.value;

    // 使用filter()方法过滤数据
    const filteredData = permanentData.filter(item =>
      item.toLowerCase().includes(filterValue.toLowerCase())
    );

    this.setState({
      filterValue,
      filteredData
    });
  }

  render() {
    const { filterValue, filteredData } = this.state;

    return (
      <div>
        <input type="text" value={filterValue} onChange={this.handleFilterChange} placeholder="输入过滤条件" />

        <ul>
          {filteredData.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default FilteredData;