如何在ReactJS中将特定API响应转换为合并后的对象数组？

原代码的问题 #

你当前的代码存在几个关键错误：

• constructor里初始化state的语法错误，应该是this.state = { userDetails: [] }，而非this.state({})
• componentDidMount中调用renderData()必须加this.，否则无法找到该方法
• 用for...in遍历数组不合适，应该用forEach或map；而且你每次都把declarationDetails和rentDetails覆盖为当前item的数组，最终只保留了最后一个item的数组，之后直接拼接两个数组的操作不是合并对象，只是把两个数组的元素简单放到一起，根本没把Rent的字段合并到Declaration对象里

正确的解决方案 #

假设API返回的res.data结构符合你的描述：

[
  {
    Declaration: [
      { id: 115, emp_name: "ringu", pan: "AWSDWHHGTRT", desigination: "TL", house_loan: 90000, car_loan: 7000 },
      // 可能包含更多员工信息
    ],
    Rent: [
      { house_rent: 12000, gym_rent: 1500 },
      // 对应每个员工的租金信息，数组长度与Declaration一致
    ]
  },
  // 可能存在更多此类顶层对象
]

我们需要把每个顶层对象里的Declaration和Rent数组的对应元素合并，最终生成一个包含所有合并后对象的数组。修改后的代码如下：

class App extends React.Component {
  constructor() {
    super();
    // 修正state初始化语法
    this.state = {
      userDetails: []
    };
  }

  componentDidMount() {
    // 调用方法需加this
    this.renderData();
  }

  renderData() {
    instance
      .get("/rentdeails/user")
      .then((res) => {
        const mergedData = [];
        
        // 遍历API返回的每个顶层对象
        res.data.forEach(item => {
          // 遍历Declaration数组，同时拿到对应索引的Rent元素
          item.Declaration.forEach((declaration, index) => {
            // 合并当前Declaration对象与对应索引的Rent对象
            const mergedObj = {
              ...declaration,
              ...item.Rent[index]
            };
            mergedData.push(mergedObj);
          });
        });

        this.setState({ userDetails: mergedData });
        console.log(mergedData);
      })
      // 增加错误捕获，避免请求失败导致崩溃
      .catch(err => {
        console.error("获取数据失败:", err);
      });
  }

  // 补全原代码缺失的render方法，React组件必须包含该方法
  render() {
    return (
      <div>
        {/* 在此处渲染你的网格组件，使用this.state.userDetails作为数据源 */}
      </div>
    );
  }
}

补充说明 #

• 用forEach遍历数组更直观，避免for...in遍历数组的潜在问题
• 使用对象扩展运算符{...a, ...b}将Rent的字段合并到Declaration对象中，若存在同名字段，后面的对象会覆盖前面的
• 如果你的Rent数组中只有一个对象，需要将其合并到当前item的所有Declaration对象里，只需把...item.Rent[index]改为...item.Rent[0]即可

内容的提问来源于stack exchange，提问作者Anandhu A