使用一个react写一个过滤数组的函数

可以使用React的useState和useEffect来实现过滤数组的函数。下面是一个简单的例子：

import React, { useState, useEffect } from 'react';

const FilterArray = () => {
  const [originalArray, setOriginalArray] = useState([]);
  const [filteredArray, setFilteredArray] = useState([]);
  const [filterValue, setFilterValue] = useState('');

  useEffect(() => {
    // 模拟异步获取原始数组数据
    setTimeout(() => {
      setOriginalArray(['apple', 'banana', 'cherry', 'date']);
    }, 1000);
  }, []);

  useEffect(() => {
    // 每次filterValue改变时，重新过滤数组
    const filtered = originalArray.filter(item =>
      item.toLowerCase().includes(filterValue.toLowerCase())
    );
    setFilteredArray(filtered);
  }, [originalArray, filterValue]);

  return (
    <div>
      <input
        type="text"
        value={filterValue}
        onChange={e => setFilterValue(e.target.value)}
      />

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

export default FilterArray;

在上述代码中，我们使用useState来创建了三个状态变量：originalArray用于存储原始数组数据，filteredArray用于存储过滤后的数组数据，filterValue用于存储过滤条件。

在useEffect钩子中，我们使用setTimeout模拟了异步获取原始数组数据的过程，并将数据存储到originalArray中。然后，每次originalArray或filterValue改变时，我们使用filter函数过滤数组，并将结果存储到filteredArray中。

最后，在组件的JSX部分，我们渲染了一个输入框和一个无序列表来展示过滤后的数组数据。通过输入框的onChange事件，我们可以实时更新filterValue的值，从而实现对数组的过滤