未捕获错误：反应。儿童仅应接收单个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('[e-mail]'));
    }

    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

两个连接和Redux提供程序都需要单个子组件，所以需要检查的一件事是：从我在antd文档中看到的情况来看，Table组件可以返回多个子组件，尝试将您的表组件包装在一个片段中。

否则，你确定它来自这个文件吗
问题可能来自Redux提供程序，在这种情况下：
作出反应。儿童仅期望收到单个react元素的子导航器将有所帮助

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

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