React中如何将API返回的多对象数组合并为单一数组

先修正API请求逻辑 #

你的原代码混用了async/await和.then，可读性差且逻辑冗余，同时请求头的Accept字段配置有误，先把这部分优化：

useEffect(() => {
  const fetchCompanyInfo = async () => {
    try {
      const response = await fetch(`/api/myapi_where=clientId=${idClient}`, {
        method: "GET",
        headers: {              
          "Accept": "application/json",
          "Content-type": "application/json"
        },
      });

      if (!response.ok) {
        throw new Error('请求企业信息失败');
      }

      // 获取API返回的原始数据（多个单元素数组组成的数组）
      const rawData = await response.json();
      // 后续在这里处理数组合并
    } catch (error) {
      console.error('请求出错:', error);
    }
  };

  fetchCompanyInfo();
}, [idClient]); // 必须添加idClient作为依赖，保证clientId变化时重新发起请求

合并多数组为单一对象数组 #

API返回的是由多个单元素数组组成的数组（形如[[{企业1}], [{企业2}], [{企业3}]]），你之前用setInfo.concat(setInfo)是把同一个数组和自身拼接，自然得到重复数据。以下三种方法都能实现正确合并：

方法1：使用flat()（最简洁）

flat()默认会将嵌套深度为1的数组扁平化，刚好匹配你的场景：

const mergedArray = rawData.flat();

方法2：使用展开运算符+concat

把每个子数组展开后再合并：

const mergedArray = [].concat(...rawData);

方法3：使用reduce遍历合并

手动遍历每个子数组，将元素累加到结果数组：

const mergedArray = rawData.reduce((result, currentArr) => {
  return result.concat(currentArr);
}, []);

最终完整代码 #

把合并后的数据存入state，就可以用map渲染列表了：

import { useEffect, useState } from 'react';

// 声明state存储合并后的企业列表
const [companyList, setCompanyList] = useState([]);

useEffect(() => {
  const fetchCompanyInfo = async () => {
    try {
      const response = await fetch(`/api/myapi_where=clientId=${idClient}`, {
        method: "GET",
        headers: {              
          "Accept": "application/json",
          "Content-type": "application/json"
        },
      });

      if (!response.ok) {
        throw new Error('请求企业信息失败');
      }

      const rawData = await response.json();
      // 合并数组
      const mergedArray = rawData.flat();
      // 更新state
      setCompanyList(mergedArray);
    } catch (error) {
      console.error('请求出错:', error);
    }
  };

  fetchCompanyInfo();
}, [idClient]);

// 渲染企业列表
return (
  <ul>
    {companyList.map(company => (
      <li key={company.id}>
        {company.name} - 创建于{company.creationDate}
      </li>
    ))}
  </ul>
);

内容的提问来源于stack exchange，提问作者Chuck Villavicencio