使用useEffect钩子获取的项目列表仅在使用useEffect过滤后呈现

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

const ProjectList = () => {
  const [projects, setProjects] = useState([]);
  const [filteredProjects, setFilteredProjects] = useState([]);

  useEffect(() => {
    // 在这里进行项目列表的获取操作，可以使用fetch、axios等库发送HTTP请求获取数据
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/projects');
      const data = await response.json();
      setProjects(data);
    };

    fetchData();
  }, []);

  useEffect(() => {
    // 在这里进行项目列表的过滤操作，根据特定条件过滤项目列表
    const filteredData = projects.filter(project => project.status === 'active');
    setFilteredProjects(filteredData);
  }, [projects]);

  return (
    <div>
      <h1>Filtered Project List</h1>
      <ul>
        {filteredProjects.map(project => (
          <li key={project.id}>{project.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProjectList;