UseEffect React中的筛选器不工作

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

function FilterExample() {
  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    // 模拟异步获取数据
    fetchData().then((result) => {
      setData(result);
    });
  }, []);

  useEffect(() => {
    // 筛选数据
    const filtered = data.filter((item) => {
      // 这里根据特定条件进行筛选
      // 示例：筛选出name中包含"React"的数据
      return item.name.includes("React");
    });
    setFilteredData(filtered);
  }, [data]);

  return (
    <div>
      {/* 渲染筛选后的数据 */}
      {filteredData.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

// 模拟异步获取数据
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: 1, name: "React" },
        { id: 2, name: "Vue" },
        { id: 3, name: "Angular" },
        { id: 4, name: "React Native" },
      ]);
    }, 1000);
  });
}

export default FilterExample;