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

Question

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

这是代码

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 似乎没有正确关闭。

在你的] 之后你需要 ) } ) } ;

第二

您必须在data 中添加order_items state，因为它是空的并且handleFetchOrder 是异步的。在你想要渲染它的时候会产生一个错误，因为你试图迭代一个不存在的属性。

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

在您的州声明中：

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

在您的渲染函数中：

添加一个常量来获取你的状态值：

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