未捕获的错误：React.Children.only 期望接收单个 React 元素子项

Question

我正在尝试使用 antd 库创建一个 web 表，但我遇到了一个错误

“react.development.js:1251 未捕获的错误：React.Children.only 预计会收到一个 React 元素子”。我完全陷入困境，无法找到解决方案。有人可以帮忙吗？

import React, { Component } from 'react';
import { Table, Divider, Tag } from 'antd';
import Link from 'next/link';
import { connect } from 'react-redux';

import { getOrdersByUser } from '../../../../store/profile/action';

class TableInvoices extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        this.props.dispatch(getOrdersByUser('buyer1@gmail.com'));
    }

    render() {
        

        // const tableData = [
        //     {
        //         id: '1',
        //         invoice_id: '500884010',
        //         product_title: 'Marshall Kilburn Portable Wireless Speaker',
        //         invoice_date: '20-1-2020',
        //         cost: '42.99',
        //         status: 'Successful delivery',
        //     },
        //     {
        //         id: '2',
        //         invoice_id: '593347935',
        //         product_title: 'Herschel Leather Duffle Bag In Brown Color',
        //         invoice_date: '20-1-2020',
        //         cost: '199.99',
        //         status: 'Cancel',
        //     },
        // ];
        let tableData = [];
        const { userOrderHistory } = this.props;
        if (
            typeof userOrderHistory != 'undefined' &&
            userOrderHistory.length > 0
        ) {
            tableData = this.props.userOrderHistory.map((row) => ({
                id: row.id,
                invoiceID: row.invoice_id,
                productTitle: row.product_title,
                invoiceDate: row.invoice_date,
                cost: row.cost,
                status: row.status,
            }));
        }
        const tableColumn = [
            {
                title: 'Id',
                dataIndex: 'invoiceID',
                rowKey: 'invoiceID',
                key: 'invoiceID',
                width: '120px',
                render: (text, record) => (
                    <Link href="/account/invoice-detail">
                        {record.invoiceID}
                    </Link>
                ),
            },
            {
                title: 'Title',
                dataIndex: 'productTitle',
                rowKey: 'productTitle',
                key: 'productTitle',
            },
            {
                title: 'Date',
                rowKey: 'invoiceDate',
                dataIndex: 'invoiceDate',
                key: 'invoiceDate',
                width: '120px',
            },
            {
                title: 'Amount',
                rowKey: 'cost',
                dataIndex: 'cost',
                key: 'cost',
                render: (text, record) => (
                    <span className="text-right">${record.cost}</span>
                ),
            },
            {
                title: 'Status',
                key: 'status',
                dataIndex: 'status',
                rowKey: 'status',
                width: '150px',
                render: (text, record) => (
                    <span className="text-right">{record.status}</span>
                ),
            },
        ];
        console.log('tableColumn');
        return (
            <Table
                columns={tableColumn}
                dataSource={tableData}
                rowKey={(record) => record.id}
            />
        );
    }
}

const mapStateToProps = (state) => {
    return state.profile;
};
export default connect(mapStateToProps)(TableInvoices);

Answer 1

connect 和 Redux Provider 都需要单个子组件，所以要检查的一件事是：根据我在 antd 文档上看到的，表组件可以返回多个子组件，尝试包装片段中的表格组件。

否则，您确定它来自此文件吗？
也许问题来自 Redux Provider，在这种情况下：
React.children.only expected to receive a single react element child Navigator 会有所帮助

另外，为了以防万一，即使这对我来说非常令人惊讶，您是否尝试过删除括号和返回的实际组件之间的空白？也许有一个不间断的空间？

return <Table
  columns={tableColumn}
  dataSource={tableData}
  rowKey={(record) => record.id}
/>