Javascript 如何使用ant设计表动态显示数据

首先，我的javascript技能水平不好，但是这里。。。我从ant.design中得到了一个表，我正试图用react构建一个前端，所以我想从我的数据库中显示表上的一些数据，但我发现它有，因为需要设置ant design表

这是密码

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;

请先帮帮忙。

您似乎没有正确关闭

数据源

在你的
]
之后，你需要
）}

第二
您必须在
状态下的
数据中添加
order\u项
，因为它为空且
handleFetchOrder
是异步的。在您想要呈现时，它将创建一个错误，因为您试图迭代一个不存在的属性

以下是您可以尝试的示例：
在您的州声明中：

state = {
      data: {
          order_items: []
      },
      error: null,
      loading: false
};

在渲染函数中：

state = {
      data: {
          order_items: []
      },
      error: null,
      loading: false
};

添加常量以获取状态值：

const data = this.state.data;
const datasource = { data.order_items.map((orderItem, i) => { ... })};

数据从哪里来？您的代码中没有具有此名称的道具、属性或函数。我已编辑了此问题，请检查并提出建议。您必须将
数据
设置为一个对象，该对象的名称为
order\u items
。