Блог

Главная - Вопросы по программированию - Как устранить ошибку типа при отображении элемента массива в react?

Как устранить ошибку типа при отображении элемента массива в react?

#javascript #reactjs #react-redux #mapping #array-map

Вопрос:

Здесь я получил переменную заказа с другой страницы. Внутри переменной порядка есть несколько объектов, массивов. Я пытаюсь сопоставить элементы массива OrderItems с порядком. Но я получаю ошибку,

 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 amp;amp; <Loader />}
      {order amp;amp; (
        <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]

Комментарии:

1. Вы посмотрели, что на самом деле содержит объект?

2. ДА. Все содержимое на месте. И даже я зарегистрировал данные объектов. Внутри массива есть еще два объекта. Но когда я пытаюсь сопоставить его, получаю ошибку.

Ответ №1:

Если вы можете быть уверены, что order.orderItems это не определено, вы можете выполнить одно из следующих действий:

Измените строку {order amp;amp; ( на {order amp;amp; order.orderItems amp;amp; ( , чтобы предотвратить неопределенную ошибку. Однако, похоже, у вас есть 404.

Было бы проще поставить это прямо над заявлением о возврате: if !order || !order.orderItem return null

Если вы знаете, как он определен, пожалуйста, дважды проверьте свою орфографию и регистр, а также внимательно изучите структуру ответа

Метки: