如何通过这个命令映射

Question

我有以下订单，我想映射订单商品和送货地址。

{message: "New Order Created",…}
message: "New Order Created"
order: {orderItems: [{name: "4Formaggi", quantity: 1, image: "pics/4formagi.jpg", price: 30,…},…],…}
createdAt: "2022-06-02T02:19:26.124Z"
isDelivered: false
isPaid: false
orderItems: [{name: "4Formaggi", quantity: 1, image: "pics/4formagi.jpg", price: 30,…},…]
0: {name: "4Formaggi", quantity: 1, image: "pics/4formagi.jpg", price: 30,…}
1: {name: "4Stagioni", quantity: 1, image: "pics/4stagioni.jpg", price: 30,…}
paymentMethod: "paypal"
shippingAddress: {fname: "Marius-Daniel Ciufu", city: "Baicoi", postal: "105200", county: "Prahova", address: "Baicoi"}
address: "Baicoi"
city: "Baicoi"
county: "Prahova"
fname: "Marius-Daniel Ciufu"
postal: "105200"
totalPrice: 60
updatedAt: "2022-06-02T02:19:26.124Z"
user: "6297ef1744555d10ed5a704b"
__v: 0
_id: "62981e2e4fa20d980c6f3a29"

我试过 order.orderItems.map((item) => ...) 但它不起作用。我收到以下错误：

Order.js:54 Uncaught TypeError: Cannot read properties of undefined (reading 'fname')
react-dom.development.js:18525 The above error occurred in the <Order> component:

如果有人有提示请告诉我

Answer 1

你的问题是，当你的组件被挂载时 order 只是一个空对象，所以你没有什么可以映射的。有几种方法可以解决这个问题，但对于您的示例，我建议添加某种加载状态。

if(!order._id) {
   return '...loading';
}
return (
    <div className="placeorder-container-items">
       // The rest of your component 
    </div>
)

这意味着当您的 api 调用正在进行时，您会看到加载文本，但一旦它完成并且有一些东西比您的第二个 return 中的所有内容都显示。

另一种选择是在您的 useReducer 中将 order 设置为 null 并执行与上述相同的操作，但仅针对整个 order 对象。

const [{ order }, dispatch] = useReducer(reducer, {
   order: null,
});

if(!order){
   return '...loading';
}

如何通过这个命令映射

How to map through this order

reactjs