Axios获取无法渲染的数据
我使用了Ant Design Pro的表组件。现在,我关心嵌套的款项的内容。代码如下所示,
const expandedRowRender = () => {
const data = [];
for (let i = 0; i < 3; i += 1) {
data.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
return (
<ProTable
columns={[
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
valueType: 'option',
render: () => [<a key="Pause">Pause</a>, <a key="Stop">Stop</a>],
},
]}
headerTitle={false}
search={false}
options={false}
dataSource={data}
pagination={false}
/>
);
};
我尝试根据原始基础修改数据,这可以实现效果
const expandedRowRender = () => {
const data: any = [];
data[0] = {key: 1, 'param_name':'999', 'var_type':'int', 'var_name':'paraone', 'var_value':100};
data[1] = {key: 2, param_name:'777', var_type:'int', var_name:'paraone', var_value:100};
console.log(data)
return (
<ProTable
columns={[
{ title: '参数名', dataIndex: 'param_name', key: 'param_name' },
{ title: '变量类型', dataIndex: 'var_type', key: 'var_type' },
{ title: '变量名', dataIndex: 'var_name', key: 'var_name' },
{ title: '变量值', dataIndex: 'var_value', key: 'var_value' },
]}
headerTitle={false}
search={false}
options={false}
dataSource={data}
pagination={false}
/>
);
};
然后我使用AXIOS从接口中获取数据,但是它是不会呈现到页面
request('/api/testdb', {
method: 'get',
}).then((res: any) => {
res.param.map((item: object) => {
data.push(item)
})
})
I used a table component of Ant Design Pro. Now I care about the contents of the nested subtable. The code is as follows
const expandedRowRender = () => {
const data = [];
for (let i = 0; i < 3; i += 1) {
data.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
return (
<ProTable
columns={[
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
valueType: 'option',
render: () => [<a key="Pause">Pause</a>, <a key="Stop">Stop</a>],
},
]}
headerTitle={false}
search={false}
options={false}
dataSource={data}
pagination={false}
/>
);
};
I tried to modify the data on the original basis, this can achieve the effect
const expandedRowRender = () => {
const data: any = [];
data[0] = {key: 1, 'param_name':'999', 'var_type':'int', 'var_name':'paraone', 'var_value':100};
data[1] = {key: 2, param_name:'777', var_type:'int', var_name:'paraone', var_value:100};
console.log(data)
return (
<ProTable
columns={[
{ title: '参数名', dataIndex: 'param_name', key: 'param_name' },
{ title: '变量类型', dataIndex: 'var_type', key: 'var_type' },
{ title: '变量名', dataIndex: 'var_name', key: 'var_name' },
{ title: '变量值', dataIndex: 'var_value', key: 'var_value' },
]}
headerTitle={false}
search={false}
options={false}
dataSource={data}
pagination={false}
/>
);
};
Then I use AXIos to get the data from the interface,but it doesn't render to the page
request('/api/testdb', {
method: 'get',
}).then((res: any) => {
res.param.map((item: object) => {
data.push(item)
})
})
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论