React动态渲染嵌套属性表格报错：Objects are not valid as a React child

错误信息（翻译后） #

未捕获错误：对象不能作为React子元素（发现带有键{_id, name}的对象）。如果要渲染子元素集合，请改用数组。

问题根源 #

1. genre字段渲染问题：你的genre是包含对象的数组，直接通过_.get(item, column.path)返回的是数组/对象，React无法直接渲染对象类型的子元素。
2. columns中content函数失效：箭头函数使用大括号{}但未显式return，导致组件和按钮无法被渲染。

解决方案 #

方案一：修改columns配置，直接指定嵌套属性路径

适合明确知道数据结构的场景，直接在columns中配置要显示的具体属性路径：

columns = [
    {path: "title", label: "Title"},
    {path: "genre[0].name", label: "Genre"}, // 直接指定取数组第一个元素的name
    {path: "numberInStock", label: "Stock"},
    {path: "dailyRentalRate", label: "Rate"},
    {
        key: "like",
        content: movie => <Liked liked={movie.liked} onClick={() => this.props.onLike(movie)} /> // 去掉大括号，自动返回组件
    },
    {
        key: "delete",
        content: movie => (
            <button
                onClick={() => this.props.onDelete(movie)}
                className="btn btn-danger btn-sm">Delete
            </button>
        ) // 用小括号包裹，自动返回按钮元素
    }
]

方案二：修改TableBody的renderCell方法，通用处理嵌套结构

如果需要兼容多种嵌套数据结构，不需要修改columns，而是在TableBody中处理值的渲染逻辑：

import React, { Component } from 'react';
import _ from 'lodash';
class TableBody extends Component {
  renderCell = (item, column) => {
    if (column.content) return column.content(item);

    const value = _.get(item, column.path);
    // 处理数组：取第一个元素的name，无数据则显示空字符串
    if (Array.isArray(value)) {
      return value.length > 0 ? value[0].name : '';
    }
    // 处理对象：优先显示name属性，兜底用JSON字符串展示
    if (typeof value === 'object' && value !== null) {
      return value.name || JSON.stringify(value);
    }
    // 普通类型直接返回
    return value;
  };

  render() {
    const { data, columns } = this.props;

    return (
      <tbody>
        {data.map((item) => (
          <tr key={item._id}>
            {columns.map((column) => (
              <td key={item._id + (column.path || column.key)}>
                {this.renderCell(item, column)}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    );
  }
}

export default TableBody;

注意：此方案同样需要修复columns中content函数的return问题（参考方案一的写法）。

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