Axios获取无法渲染的数据

发布于 2025-02-07 03:52:59 字数 2668 浏览 1 评论 0原文

我使用了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}
    />
  );
};

Print out the data

Page rendering success

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)
    })
  })

Print out the data

Page rendering failed

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文