如何在React中使用array.map、useState、useEffect和onClick随机显示项目？

const [projects, setProjects] = useState([]);
const [currentIndex, setCurrentIndex] = useState(0);

useEffect(() => {
  // 模拟异步获取项目列表的过程
  const fetchProjects = async () => {
    const response = await fetch('项目列表的API地址');
    const data = await response.json();
    setProjects(data);
  };

  fetchProjects();
}, []);

return (
  <div>
    {projects.map((project, index) => (
      <div key={index}>{project.name}</div>
    ))}
  </div>
);

const handleClick = () => {
  const randomIndex = Math.floor(Math.random() * projects.length);
  setCurrentIndex(randomIndex);
};

return (
  <div>
    {projects.map((project, index) => (
      <div key={index}>{project.name}</div>
    ))}
    <button onClick={handleClick}>随机显示项目</button>
    <div>当前显示的项目：{projects[currentIndex]?.name}</div>
  </div>
);