[英]How to display data dynamically with ant design tables
first please my javascript skill level is not good, but here... I have a table i got from ant.design, im trying to build a frontend with react, so I want to display some data on the table from my database but im finding it had because of the want ant design table is set up.首先请我的 javascript 技能水平不好,但是这里...我有一张从 ant.design 得到的表,我正在尝试使用 React 构建前端,所以我想在我的数据库中的表上显示一些数据,但是我发现它已经因为要蚂蚁设计表建立了。
This is the code这是代码
class OrderSummary extends React.Component {
state = {
data: null,
error: null,
loading: false
};
componentDidMount() {
this.handleFetchOrder();
}
handleFetchOrder = () => {
this.setState({ loading: true });
authAxios
.get(orderSummaryURL)
.then(res => {
this.setState({ data: res.data, loading: false });
})
.catch(err => {
// if (err.response.status === 404) {
// this.setState({
// error: "You currently do not have an order",
// loading: false
// });
// } else {
this.setState({ error: err, loading: false });
// }
});
};
render() {
const columns = [
{
title: 'Number',
dataIndex: 'number',
key: 'number',
render: text => <a>{text}</a>,
},
{
title: 'Event Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Event Price',
dataIndex: 'price',
key: 'price',
},
{
title: 'Quantity',
dataIndex: 'quantity',
key: 'quantity',
},
{
title: 'Total',
dataIndex: 'total',
key: 'total',
},
];
const datasource =
{data.order_items.map((orderItem, i) => {
return (
[
{
key: {orderItem.id},
number: {orderItem.item.title} -{" "},
name: 32,
price: 'NGN' {orderItem.item.price} ,
quantity: {orderItem.quantity},
total: {data.total},
},
// {
// key: 1,
// name: 'John Brown',
// age: 32,
// address: 'New York No. 1 Lake Park',
// tags: ['nice', 'developer'],
// },
];
return (
<Layout>
<div>
<PageHeader
className="site-page-header"
onBack={() => null}
title="Order Summary"
/>
<Table columns={columns}
dataSource={datasource} />
</div>
</Layout>
)
}
};
export default OrderSummary;
Note where i commented out, that part works perfectly because thats how it comes from ant.design请注意我注释掉的地方,该部分完美运行,因为它来自 ant.design
This is the error I keep getting这是我不断收到的错误
Failed to compile
./src/containers/OrderSummary.js
Line 95:14: Parsing error: Unexpected token, expected ","
93 |
94 | const datasource =
> 95 | {data.order_items.map((orderItem, i) => {
| ^
96 | return (
97 | [
98 | {
Please help.请帮忙。
It seems you didn't close correctly your datasource
.看来您没有正确关闭您的
datasource
。
After your ]
you need ) } ) } ;
在您的
]
之后,您需要) } ) } ;
You have to add order_items
in data
in the state
, as it's null and handleFetchOrder
is asynchronous.您必须在
state
data
中添加order_items
,因为它为 null 并且handleFetchOrder
是异步的。 At the time you want to render it will create an error because you try to iterate over a no existing property.当你想要渲染它时会产生一个错误,因为你试图迭代一个不存在的属性。
In your state declaration:在您的状态声明中:
state = {
data: {
order_items: []
},
error: null,
loading: false
};
In your render function:在您的渲染功能中:
Add a const to get your state value:添加一个 const 以获取您的状态值:
const data = this.state.data;
const datasource = { data.order_items.map((orderItem, i) => { ... })};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.