javascript - 未捕获的错误:React.Children.only 期望接收单个 React 元素子项
问题描述
我正在尝试使用 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);
解决方案
connect
Redux都Provider
期望单个子组件,所以要检查的一件事是:根据我在 antd 文档上看到的,表组件可以返回多个子组件,尝试将表组件包装在片段中。
否则,你确定它来自这个文件吗?
也许问题来自 Redux Provider,在这种情况下:
React.children.only 期望接收单个反应元素 child Navigator会有所帮助
另外,以防万一,即使这对我来说非常令人惊讶,您是否尝试过删除括号和返回的实际组件之间的空格?也许有一个不间断的空间?
return <Table
columns={tableColumn}
dataSource={tableData}
rowKey={(record) => record.id}
/>
推荐阅读
- java - 这些错误信息是什么意思?(Java 摇摆)
- azure - 使用 Azure DevOps,如何将发布管道迁移到代码,类似于构建管道 yml?
- c++ - 如何将双端队列>>向量>>字节迭代到函数
- mysql - leftJoin 与同一个表返回比预期更多的记录(查询生成器)
- python - 如何使 ttk.Treeview 可编辑?
- android - 有没有办法通过 IDE for Flutter 查看可能的参数列表?
- regex - 使用正则表达式在模式之前使用匹配模式匹配带有千位分隔符的数字
- javascript - 如何在文档就绪时为按钮(类)提供活动悬停状态?
- javascript - 检查 webapp 是否安装了 React、Angular 或 Vue
- c - 为什么这个信号量卡住了