React函数组件中如何将接口返回数组转换为指定对象存入新数组

问题场景 #

需要将后端返回的购物车原始对象数组，按指定字段规则映射为新结构的数组：

• 原始数组单条元素字段：createdAt、orderPrice、orderQuantity、嵌套对象类型的productId、updatedAt、_id
• 目标单条对象结构：

{
  productId: item.productId._id,
  perProductTotal: item.orderQuantity * item.orderPrice,
  orderPrice: item.orderPrice,
  orderQuantity: item.orderQuantity
}

之前在useEffect中通过push、setCartProducts实现转换均未得到预期结果。

高频错误原因 #

• 未判断接口返回的cartItems.cartItems是否为合法数组，数据未返回时就执行遍历直接报错
• map遍历函数内未写return，或返回对象字面量时未加小括号包裹，导致生成的数组全为undefined
• 用push手动拼接数组时作用域逻辑错误，出现重复追加、空值问题
• 未做嵌套字段空值防护，某条数据的productId为空时直接取_id触发JS报错，中断整个转换流程
• useEffect依赖项缺失，接口数据更新后未触发重新转换
• 状态更新时做多余的展开、拼接操作，导致最终数组结构不符合预期

可直接运行的正确代码 #

import { useEffect, useState } from 'react';

// 组件内状态声明
const [cartProducts, setCartProducts] = useState([]);

useEffect(() => {
  // 前置校验：接口返回成功、且购物车字段为合法数组才执行转换
  if (cartItems?.success && Array.isArray(cartItems?.cartItems)) {
    // 直接通过map生成新数组，无需额外用push循环拼接
    const formattedList = cartItems.cartItems.map(item => ({
      productId: item?.productId?._id, // 可选链兜底，避免空值报错
      perProductTotal: Number(item.orderQuantity) * Number(item.orderPrice), // 转数字避免字符串计算bug
      orderPrice: Number(item.orderPrice),
      orderQuantity: Number(item.orderQuantity)
    }));

    // 直接将转换完成的数组传入状态更新方法即可
    setCartProducts(formattedList);
  }
// 把接口返回的cartItems加入依赖数组，数据拉取完成后自动触发转换
}, [cartItems]);

结果校验 #

转换完成后可在setCartProducts前打印formattedList验证：

• 数组长度与原始cartItems.cartItems长度一致（当前场景应为3）
• 单条对象无多余的createdAt、updatedAt、原始productId嵌套对象等冗余字段
• perProductTotal计算结果准确

内容的提问来源于stack exchange，提问作者Soumik Ahammed