如何使用蚂蚁设计表动态显示数据

Question

首先请问我的JavaScript技能水平不是很好，但是在这里...我有一张来自ant.design的表格，我试图用react构建前端，所以我想在表格上显示一些数据数据库，但由于要设置蚂蚁设计表而无法找到它。

这是代码

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;

请注意，我在其中注释掉的那部分效果很好，因为那是ant.design产生的原因

这是我不断收到的错误

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 |               {

请帮助。

Answer 1

第一

似乎您没有正确关闭datasource。

在]之后，您需要 ) } ) } ;

第二

您必须在order_items的{​​{1}}中添加data，因为它为空并且state是异步的。在您要渲染时，由于您尝试对不存在的属性进行迭代，因此会产生错误。

下面是您可以尝试的示例：

在您的州声明中：

handleFetchOrder

在渲染功能中：

添加一个常量以获取状态值：

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