React嵌套对象映射异常：数组值被拼接而非分开显示

数据结构 #

"data": {
  "user1": {
    "Public": [1, 0],
    "Team Only": [1, 1],
    "All": [1, 1]
  },
  "user2": {
    "Public": [0, 0],
    "Team Only": [0, 0],
    "All": [0, 0]
  }
}

现有映射代码 #

const TableRows = (obj) => {
    const userObject = Object.entries(obj);
    const row = userObject.map((owner, mainIndex)=> {
      return (
        <TableRow key={console.log(`row-record-${owner[1]}`)} highlightOnHover={true}>
          {Object.entries(owner[1]).map((value, index) => (
            <TableCell
              key={console.log(`column-value-${value}`)}
              alignmentHorizontal={
                tabsAlignment[props.metricComponent] &&
                props.componentName != "Open_COE_Default"
                  ? tabsAlignment[props.metricComponent][index]
                  : index != 0
                    ? "center"
                    : ""
              }
            >
             {owner[1]} // 此处输出user1, 11,11，预期应为user1, 1, 1
            </TableCell>
          ))}
        </TableRow>
      );
    });
    return row;
};

问题描述 #

预期UI输出：

user1, 1, 1
user2, 1, 1

实际UI输出：

user1, 11,11
user2, 22,22

数组中的两个独立数值（如1和1）被直接拼接成11，需要排查映射逻辑问题。

问题原因与修复方案 #

1. 渲染内容错误 #

你在每个TableCell里渲染的是owner[1]——也就是整个用户的完整数据对象，而非当前循环对应的数组值。另外，React在JSX中直接渲染数组时，会自动将数组元素无分隔符拼接（比如[1,1]会被渲染成11），这是数值被拼接的核心原因。

2. Key属性错误 #

用console.log作为key完全不符合要求，console.log返回undefined，React要求key必须是稳定、唯一的字符串或数字，这种写法会导致渲染异常或性能问题。

修正后的代码 #

根据你的预期输出，假设你需要每行显示「用户名 + All属性对应的两个数值（各占一个单元格）」，修正后的代码如下：

const TableRows = (obj) => {
  const userEntries = Object.entries(obj);
  return userEntries.map(([userName, userData]) => {
    // 获取All对应的数组值
    const allValues = userData.All;
    return (
      <TableRow key={`row-${userName}`} highlightOnHover={true}>
        {/* 用户名单元格 */}
        <TableCell key={`cell-${userName}-name`}>
          {userName}
        </TableCell>
        {/* 遍历All数组生成数值单元格 */}
        {allValues.map((num, idx) => (
          <TableCell
            key={`cell-${userName}-all-${idx}`}
            alignmentHorizontal="center"
          >
            {num}
          </TableCell>
        ))}
      </TableRow>
    );
  });
};

如果你的需求是遍历用户的所有属性（Public/Team Only/All），每个属性对应的数组以逗号分隔显示，代码可以调整为：

const TableRows = (obj) => {
  const userEntries = Object.entries(obj);
  return userEntries.map(([userName, userData]) => {
    const dataEntries = Object.entries(userData);
    return (
      <TableRow key={`row-${userName}`} highlightOnHover={true}>
        {/* 用户名单元格 */}
        <TableCell key={`cell-${userName}-name`}>
          {userName}
        </TableCell>
        {/* 遍历每个属性，数组转成带逗号的字符串 */}
        {dataEntries.map(([category, values], idx) => (
          <TableCell
            key={`cell-${userName}-${category}`}
            alignmentHorizontal={
              tabsAlignment[props.metricComponent] && props.componentName !== "Open_COE_Default"
                ? tabsAlignment[props.metricComponent][idx]
                : "center"
            }
          >
            {values.join(', ')}
          </TableCell>
        ))}
      </TableRow>
    );
  });
};

内容的提问来源于stack exchange，提问作者Zubair Amjad