Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

204
Vistas
How to resolve type error when mapping an array element in react?

Here, I got the order variable from another page. There are some objects, arrays inside the order variable. I am trying to map the array orderItems from the order. But I am getting the 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 |     });

Here is my whole code,

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;

I have tried to solve the problem but it's still same. When i run the code i got another error in the console,

GEThttp://localhost:3000/ordersdescription/6140593f5c89e23eb059af8d
[HTTP/1.1 404 Not Found 191ms]
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

If you can be certain that order.orderItems Is not defined then you can do one of the following:

Change the line {order && ( to {order && order.orderItems && ( to prevent the undefined error. However it would seem you got a 404.

It would be easier to put this right above the return statement: if !order || !order.orderItem return null

If you know its defined, then please double check your spelling and casing as well as closely examine the response structure

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda