Reactjs 使用React钩子，尝试使用forEach获取多个数据

我试图从FigmaAPI获取数据，但不幸的是，我不能在一次调用中完成。我首先需要获得团队中所有项目的列表，然后针对每个项目，获得文件列表

以下是我为此编写的代码：

  const [projects, setProjects] = useState([]);
  const [files, setFiles] = useState([]);

  useEffect(() => {
    const fetchProjects = async () => {
      const result = await axios(
        `https://api.figma.com/v1/teams/${teamId}/projects`, {
          headers: { 'Authorization': `Bearer ${token}` }
        });
      setProjects(result.data.projects);
    };

    fetchProjects();
  }, []);

  useEffect(() => {
    projects.forEach(project => {
      const fetchFiles = async () => {
        const result = await axios(
          `https://api.figma.com/v1/projects/${project.id}/files`, {
            headers: { 'Authorization': `Bearer ${token}` }
          });

        setFiles([ ...files, {
          projectName: project.name,
          files: result.data.files
        }])
      };

      fetchFiles();
    })
  }, [projects]);

我明确地只将

项目

作为第二个useEffect的依赖项，否则它将创建许多不同的渲染，我只想在项目列表中循环

在我的Figma团队中，我有4个项目。每个文件都有1到5个文件。我希望我的状态文件有4个对象，其中包含项目名称及其包含的文件列表

---

我今天遇到的问题是，首先我收到React的一些警告，说我需要放置其他依赖项，其次我的文件状态仅填充了最新的项目，而不是全部4个项目。

就状态而言，您之所以会遇到这个问题，是因为您试图基于闭包变量更新循环中的状态。相反，您可以使用回调模式来更新状态。这也不会警告您将文件作为依赖项添加到

useffect

您还可以将fetchFiles函数移出循环之外

您也可以选择将setFiles方法添加为依赖项，或者禁用警告，因为它不会影响代码<代码>设置文件功能在代码范围内不会更改

const [projects, setProjects] = useState([]);
  const [files, setFiles] = useState([]);

  useEffect(() => {
    const fetchProjects = async () => {
      const result = await axios(
        `https://api.figma.com/v1/teams/${teamId}/projects`, {
          headers: { 'Authorization': `Bearer ${token}` }
        });
      setProjects(result.data.projects);
    };

    fetchProjects();
  }, []);

  useEffect(() => {
    const fetchFiles = async (id, name) => {
        const result = await axios(
          `https://api.figma.com/v1/projects/${id}/files`, {
            headers: { 'Authorization': `Bearer ${token}` }
          });

        setFiles(prevFiles => ([ ...prevFiles, {
          projectName: name,
          files: result.data.files
        }]))
      };
    projects.forEach(project => {
      fetchFiles(project.id, project.name);
    })
  }, [projects]);