React -如何在不丢失数据的情况下过滤列表？

const [list, setList] = useState([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]);

const [filter, setFilter] = useState('');

const filteredList = list.filter(item => item.name.includes(filter));

const handleFilterChange = event => {
  setFilter(event.target.value);
};

const handleFilterSubmit = () => {
  const filteredList = list.filter(item => item.name.includes(filter));
  setList(filteredList);
};

import React, { useState } from 'react';

const ListFilter = () => {
  const [list, setList] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ]);
  const [filter, setFilter] = useState('');

  const filteredList = list.filter(item => item.name.includes(filter));

  const handleFilterChange = event => {
    setFilter(event.target.value);
  };

  const handleFilterSubmit = () => {
    const filteredList = list.filter(item => item.name.includes(filter));
    setList(filteredList);
  };

  return (
    <div>
      <input type="text" value={filter} onChange={handleFilterChange} />
      <button onClick={handleFilterSubmit}>Filter</button>
      <ul>
        {filteredList.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ListFilter;