Javascript 为什么我的数据在自动为其创建空间时不显示

请帮助，我的代码应该使用react和ant.design将一些动态内容显示到表中。我让一切正常，但它不显示实际内容，而是为它创建了空间

我的确切意思是，当我控制台数据时，代码显示一个由3项组成的数组，因此它在我的表上创建了3行（这显示了它与数据的连接），但它不显示实际内容，也不显示任何错误

class OrderSummary extends React.Component {
  state = {
    data: {order_items: []},
    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 => {
          this.setState({ error: err, loading: false });
        // }
      });
  };

    render() {
      const { data, error, loading } = this.state;
          console.log(data);

      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: 'Final Price',
          dataIndex: 'final_price',
          key: 'final_price',
        },
        {
          title: 'Total',
          dataIndex: 'total',
          key: 'total',
        },
      
     
      ];

     const datasource =  
        data.order_items.map((orderItem, i) => {
            return (
              [
                {
                  key: orderItem.id,
                  number: i + 1,
                  name: orderItem.item.title,
                  price: orderItem.item.price,
                  quantity: orderItem.quantity,
                  final_price: orderItem.final_price,
                  total: data.total,
                }
                ]
              )
                
              })


        return (
            <Layout>
            <div>
                 <PageHeader
                    className="site-page-header"
                    onBack={() => null}
                    title="Order Summary"
                    // subTitle="This is a subtitle"
                />
                <Table columns={columns} 
                
                dataSource={datasource} />
            </div>
            </Layout>
        )
    }
 } 


export default OrderSummary;

类OrderSummary扩展了React.Component{ 状态={ 数据：{order_items:[]}， 错误：null， 加载：错误 }; componentDidMount（）{ 此.handleFetchOrder（）； } handleFetchOrder=（）=>{ this.setState（{loading:true}）； 奥塔克索斯 .get（orderSummaryURL） 。然后（res=>{ this.setState（{data:res.data，load:false}）； }) .catch（错误=>{ this.setState（{error:err，load:false}）； // } }); }; render（）{ const{data，error，loading}=this.state； 控制台日志（数据）； 常量列=[ { 标题:"数字",， dataIndex:'编号'， 键：'数字'，

---

render:text=>。

在map函数中，为每个元素返回一个数组。 迭代结束时，

数据源

将采用以下形式：

[Array(1), Array(1), Array(1)]

这就是您无法在表中看到数据的原因，您需要的是对象数组而不是数组数组。您只需在返回map函数时删除

[]

const datasource =
    data.order_items.map((orderItem, i) => {
        return (
                {
                    key: orderItem.id,
                    number: i + 1,
                    name: orderItem.item.title,
                    price: orderItem.item.price,
                    quantity: orderItem.quantity,
                    final_price: orderItem.final_price,
                    total: data.total,
                }
        )
    });

---

尝试记录

datasource

，如果看到正确的数据和结构，请进行更新。好的。谢谢。我会试试的