Aquí, obtuve la variable de orden de otra página. Hay algunos objetos, matrices dentro de la variable order . Estoy tratando de mapear los elementos de pedido de la matriz del pedido . Pero estoy recibiendo el error,
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 | });Aquí está mi código completo,
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;He intentado solucionar el problema pero sigue igual. Cuando ejecuto el código tengo otro error en la consola,
GEThttp://localhost:3000/ordersdescription/6140593f5c89e23eb059af8d [HTTP/1.1 404 Not Found 191ms]Si puede estar seguro de que order.orderItems no está definido, puede realizar una de las siguientes acciones:
Cambie la línea {order && ( a {order && order.orderItems && ( para evitar el error indefinido. Sin embargo, parece que obtuvo un 404.
Sería más fácil poner esto justo encima de la instrucción return: if !order || !order.orderItem return null
Si sabe que está definido, verifique dos veces la ortografía y el uso de mayúsculas y minúsculas, así como un examen detallado de la estructura de la respuesta.