使用 React Hook，尝试使用 forEach 获取多个数据

Posted 2023-02-22

【中文标题】使用 React Hook，尝试使用 forEach 获取多个数据

【英文标题】：With a React Hook, trying to fetch multiple datas using forEach

【发布时间】：2020-01-01 07:11:11

【问题描述】：

我正在尝试从 Figma API 获取数据，但不幸的是我无法一次调用。我首先需要获取团队中所有项目的列表，然后为每个项目获取文件列表。

这是我为此编写的代码：

  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]);

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

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

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

【参考方案1】：

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

您也可以将 fetchFiles 函数移出循环。

您还可以选择将 setFiles 方法添加为依赖项或禁用警告，因为它不会影响您的代码。 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]);