在react中映射数组元素时如何解决类型错误?

Question

这里，我得到了订单变量从另一个页面。在顺序中有一些对象，数组变量。我试图映射数组orderItemsfromorder。但是我得到了错误，

TypeError: order.orderItems is undefined
Index
src/pages/OrdersDescription/Index.js:24
21 | <div>
22 |   <div className="row justify-content-center">
23 |     <div className="col-md-5 card">
> 24 |       <h2>Items</h2>
| ^  25 | 
26 |       {order.orderItems.map((item) => {
27 |         return (
getOrderById/</<
src/app/actions/orderActions.js:77
74 | axios
75 |   .post("/api/orders/getorderbyid", { orderid: orderid })
76 |   .then((res) => {
> 77 |     dispatch({
| ^  78 |       type: "GET_ORDERBYID_SUCCESS",
79 |       payload: res.data,
80 |     });

这是我的全部代码，

import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getOrderById } from "../../app/actions/orderActions";
import Loader from "../../components/Spinner/Index";
const Index = ({ match }) => {
const dispatch = useDispatch();
const orderItemDataFromState = useSelector(
(state) => state.getOrderByIdReducer
);
const { order, loading } = orderItemDataFromState;
useEffect(() => {
dispatch(getOrderById(match.params.orderid));
console.log("ese");
}, [dispatch]);
console.log(order);
return (
<div>
{loading && <Loader />}
{order && (
<div>
<div className="row justify-content-center">
<div className="col-md-5 card">
<h2>Items</h2>
{order.orderItems.map((item) => {
return (
<div>
<h2>{item.name}</h2>
<p>{item.quantity}</p>
<p>
{item.quantity} * {item.price} =
{item.quantity * item.price}
</p>
</div>
);
})}
</div>
<div></div>
</div>
</div>
)}
</div>
);
};
export default Index;

我已经试着解决这个问题了，但它还是一样。当我运行代码时，我在控制台中得到了另一个错误，

GEThttp://localhost:3000/ordersdescription/6140593f5c89e23eb059af8d
[HTTP/1.1 404 Not Found 191ms]

Answer 1

如果您可以确定order.orderItems未定义，那么您可以执行以下操作之一:

将{order && (更改为{order && order.orderItems && (，以防止未定义错误。然而，你似乎得到了一个404。

将它放在返回语句的正上方会更容易:if !order || !order.orderItem return null

如果你知道它的定义，那么请仔细检查你的拼写和大小写，并仔细检查响应结构