Antd Table无法渲染：报错‘Objects are not valid as a React child’求助

Hey there! Let's work through this common error you're hitting with Ant Design's Table component. That error almost always means you're accidentally trying to render a plain JavaScript object directly as a React child—something React doesn't allow. Here's how to troubleshoot and fix it:

1. Double-Check Your Columns Configuration #

Most often, the issue comes from a render function in your columns returning an object instead of a valid React element or primitive value (string/number).

Example of the Mistake: #

const columns = [
  {
    title: 'User Info',
    dataIndex: 'user',
    // ❌ Returns an object directly instead of rendering its content
    render: (user) => user 
  }
];

Correct Approach: #

Extract the specific value from the object and render it as text or a React element:

const columns = [
  {
    title: 'User Info',
    dataIndex: 'user',
    // ✅ Renders the user's name property
    render: (user) => <span>{user.name}</span>
  }
];

You can also use Ant Design's built-in dataIndex syntax to dig into nested objects directly:

const columns = [
  {
    title: 'User Name',
    // ✅ Directly targets the nested name field
    dataIndex: ['user', 'name'],
    key: 'userName'
  }
];

2. Validate Your Data Source #

Make sure none of the fields in your data array are objects that you're trying to render without processing. For example, if your data has a nested object like { id: 1, profile: { email: "test@example.com" } }, don't map profile directly to a column's dataIndex—extract the email field first.

3. Verify RowSelection Configuration #

If you're using rowSelection, ensure all its properties are returning valid values. For example, getCheckboxProps should return an object with boolean values (like disabled), not objects that would be rendered accidentally.

Correct RowSelection Example: #

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log('Selected rows:', selectedRows);
  },
  getCheckboxProps: (record) => ({
    // ✅ Returns a boolean, not an object
    disabled: record.age < 18 
  })
};

4. Confirm Version Compatibility #

Ensure your React and Ant Design versions play well together. Ant Design 5.x requires React 16.8 or higher. If your create-react-app project is outdated, update your dependencies:

npm install react@latest react-dom@latest

Full Working Example #

Here's a minimal, tested example you can drop into your App.js to confirm everything works:

import React from 'react';
import { Table } from 'antd';

function App() {
  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    { 
      title: 'Status', 
      dataIndex: 'status', 
      key: 'status',
      render: (status) => <span className={status === 'active' ? 'text-green' : 'text-gray'}>{status}</span>
    }
  ];

  const data = [
    { key: '1', name: 'John Doe', age: 30, status: 'active' },
    { key: '2', name: 'Jane Smith', age: 28, status: 'inactive' }
  ];

  const rowSelection = {
    onChange: (selectedRowKeys) => console.log('Selected keys:', selectedRowKeys)
  };

  return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
}

export default App;

If you're still stuck, check your browser's dev tools console—React usually gives a more specific error message pointing to exactly which component or line is causing the problem. That'll help narrow things down even faster!

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