React报错：Objects are not valid as a React子元素，二次循环异常

问题场景 #

在React开发中遇到报错「Objects are not valid as a React child」，第一个循环可正常打印值，但第二个循环持续触发该错误，改用常规map也无效，不清楚二次循环的问题所在。

相关代码如下：

const TableRows = (rows) => {
  const row = Object.entries(rows).map((owner, mainIndex) => {
    return (
      <TableRow key={console.log(`row-record-${owner[0]}`)} highlightOnHover={true}>
        {Object.entries(owner).map((value, index) =>  (
          <TableCell
            key={`column-value-${value}`}
            alignmentHorizontal={
              tabsAlignment[props.metricComponent] &&
              props.componentName != "Open_COE_Default"
                ? tabsAlignment[props.metricComponent][index]
                : index != 0
                  ? "center"
                  : ""
            }
            sortColumn={value}
          >
            {loadData(value, index, owner, mainIndex)}
          </TableCell>
        ))}
      </TableRow>
    );
  });
  return row;
};

编辑补充的loadData函数：

const loadData = (value, index, ownerData, mainIndex) => {
  {console.log("Test" + value[index])}
  if (
    isNotNullOrUndefined(props.componentName) &&
    props.componentName == "Open_COE_Default"
  ) {
    if (value > 0 && index >= 1) {
      return (
        <Link
          href="#"
          type="secondary"
          onClick={() => {
            loadRawData(index, ownerData[0]);
          }}
        >
          {console.log("Value " + value)}
          {value}
        </Link>
      );
    } else if (index == 0) {
      return (
        <div
          style={{
            marginLeft:
              !pathname.includes(routes.WBR) && mainIndex != 0
                ? OWNER_RECORD_MARGIN
                : null,
          }}
        >
          <Link
            href="#"
            type="secondary"
            onClick={() => {
              updateUserChain(ownerData[0]);
            }}
          >
            {ownerData[0]}
          </Link>
        </div>
      );
    } else {
      return value;
    }
  }
};

错误原因分析 #

1. Object.entries返回值误用：Object.entries(owner).map((value, index)中，value是[键名, 对应值]的数组（比如["username", "zhangsan"]），而非单个值。当loadData的else分支直接返回value时，相当于返回了一个普通数组，React无法直接渲染这类数组作为子元素，这是报错核心原因。
2. key属性设置无效：TableRow的key用了console.log的返回值（undefined），React要求key必须是稳定、唯一的字符串/数字，无效key会导致渲染异常。
3. 冗余JSX语法：loadData里的{console.log("Test" + value[index])}多了一层大括号，属于无效JSX表达式，应改为普通函数调用。
4. 函数返回值不完整：loadData未处理props.componentName不满足条件的情况，可能返回undefined，触发额外渲染问题。

修复后的代码 #

修复TableRows函数 #

const TableRows = (rows) => {
  const row = Object.entries(rows).map(([ownerKey, ownerValue], mainIndex) => {
    // 解构owner的key和value，避免混淆
    return (
      <TableRow key={`row-record-${ownerKey}`} highlightOnHover={true}>
        {Object.entries(ownerValue).map(([columnKey, columnVal], index) => (
          // 解构列的key和值，明确传递单个值给loadData
          <TableCell
            key={`column-value-${ownerKey}-${index}`} // 组合唯一key
            alignmentHorizontal={
              tabsAlignment[props.metricComponent] &&
              props.componentName !== "Open_COE_Default"
                ? tabsAlignment[props.metricComponent][index]
                : index !== 0
                  ? "center"
                  : ""
            }
            sortColumn={columnKey} // 根据业务需求传递列key或值
          >
            {loadData(columnVal, index, [ownerKey, ownerValue], mainIndex)}
          </TableCell>
        ))}
      </TableRow>
    );
  });
  return row;
};

修复loadData函数 #

const loadData = (value, index, ownerData, mainIndex) => {
  console.log("Test" + value); // 去掉冗余大括号，直接调用console.log
  if (isNotNullOrUndefined(props.componentName) && props.componentName === "Open_COE_Default") {
    if (value > 0 && index >= 1) {
      return (
        <Link
          href="#"
          type="secondary"
          onClick={() => {
            loadRawData(index, ownerData[0]);
          }}
        >
          {console.log("Value " + value)}
          {value}
        </Link>
      );
    } else if (index === 0) {
      return (
        <div
          style={{
            marginLeft: !pathname.includes(routes.WBR) && mainIndex !== 0
              ? OWNER_RECORD_MARGIN
              : null,
          }}
        >
          <Link
            href="#"
            type="secondary"
            onClick={() => {
              updateUserChain(ownerData[0]);
            }}
          >
            {ownerData[0]}
          </Link>
        </div>
      );
    } else {
      return value;
    }
  }
  // 补充默认返回值，避免无返回值情况
  return value;
};

修复要点总结 #

• 用解构赋值明确Object.entries返回的key和value，避免传递数组给React渲染。
• 确保key属性是唯一且稳定的标识，禁止用console.log或不稳定值。
• 移除JSX中冗余的大括号，保持表达式简洁。
• 保证函数有完整的返回逻辑，避免出现undefined。

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