Блог

Я довольно новичок в javascript и пытаюсь totalProfit настроить отображение на странице списка заказов. Я продолжаю получать ошибку типа: Не удается прочитать свойства undefined (чтение «Исправлено») Ниже я включил то, что у меня есть. Я был бы очень признателен за любую помощь или совет о том, почему у меня возникла эта проблема. Спасибо!

OrderListScreen.js

 import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { deleteOrder, listOrders } from '../actions/orderActions'; import LoadingBox from '../components/LoadingBox'; import MessageBox from '../components/MessageBox'; import { ORDER_DELETE_RESET } from '../constants/orderConstants';  export default function OrderListScreen(props) {  const sellerMode = props.match.path.indexOf('/seller') gt;= 0;  const orderList = useSelector((state) =gt; state.orderList);  const { loading, error, orders } = orderList;  const orderDelete = useSelector((state) =gt; state.orderDelete);  const {  loading: loadingDelete,  error: errorDelete,  success: successDelete,  } = orderDelete;   const userSignin = useSelector((state) =gt; state.userSignin);  const { userInfo } = userSignin;  const dispatch = useDispatch();  useEffect(() =gt; {  dispatch({ type: ORDER_DELETE_RESET });  dispatch(listOrders({ seller: sellerMode ? userInfo._id : '' }));  }, [dispatch, sellerMode, successDelete, userInfo._id]);  const deleteHandler = (order) =gt; {  // TODO: delete handler  if (window.confirm('Are you sure to delete?')) {  dispatch(deleteOrder(order._id));  }  };  return (  lt;divgt;  lt;h1gt;Orderslt;/h1gt;  {loadingDelete amp;amp; lt;LoadingBoxgt;lt;/LoadingBoxgt;}  {errorDelete amp;amp; lt;MessageBox variant="danger"gt;{errorDelete}lt;/MessageBoxgt;}  {loading ? (  lt;LoadingBoxgt;lt;/LoadingBoxgt;  ) : error ? (  lt;MessageBox variant="danger"gt;{error}lt;/MessageBoxgt;  ) : (  lt;table className="table"gt;  lt;theadgt;  lt;trgt;  lt;thgt;IDlt;/thgt;  lt;thgt;USERlt;/thgt;  lt;thgt;DATElt;/thgt;  lt;thgt;TOTALlt;/thgt;  lt;thgt;PAIDlt;/thgt;  lt;thgt;DELIVEREDlt;/thgt;  lt;thgt;SHIPPEDlt;/thgt;  lt;thgt;RETURNEDlt;/thgt;  lt;thgt;PROFITlt;/thgt;  lt;thgt;ACTIONSlt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  {orders.map((order) =gt; (  lt;tr key={order._id}gt;  lt;tdgt;{order._id}lt;/tdgt;  lt;tdgt;{order.username}lt;/tdgt;  lt;tdgt;{order.createdAt.substring(0, 10)}lt;/tdgt;  lt;tdgt;{order.totalPrice.toFixed(2)}lt;/tdgt;  lt;tdgt;{order.isPaid ? order.paidAt.substring(0, 10) : 'No'}lt;/tdgt;  lt;tdgt;  {order.isDelivered  ? order.deliveredAt.substring(0, 10)  : 'No'}  lt;/tdgt;  lt;tdgt;  {order.isShipped  ? order.ShippedAt.substring(0, 10)  : 'No'}  lt;/tdgt;  lt;tdgt;  {order.isReturned  ? order.ReturnedAt.substring(0, 10)  : 'No'}  lt;/tdgt;  lt;tdgt;{order.totalProfit.toFixed(2)}lt;/tdgt;  lt;tdgt;  lt;button  type="button"  className="small"  onClick={() =gt; {  props.history.push(`/order/${order._id}`);  }}  gt;  Details  lt;/buttongt;  lt;button  type="button"  className="small"  onClick={() =gt; deleteHandler(order)}  gt;  Delete  lt;/buttongt;  lt;/tdgt;  lt;/trgt;  ))}  lt;/tbodygt;  lt;/tablegt;  )}  lt;/divgt;  ); }   

PlaceOrderScreen.js

 import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Link } from 'react-router-dom'; import {createOrder, } from '../actions/orderActions'; import CheckoutSteps from '../components/CheckoutSteps'; import { ORDER_CREATE_RESET } from '../constants/orderConstants'; import LoadingBox from '../components/LoadingBox'; import MessageBox from '../components/MessageBox';  export default function PlaceOrderScreen(props) {  const cart = useSelector((state) =gt; state.cart);  if (!cart.paymentMethod) {  props.history.push('/payment');  }  const orderCreate = useSelector((state) =gt; state.orderCreate);  const { loading, success, error, order } = orderCreate;  const toPrice = (num) =gt; Number(num.toFixed(2)); // 5.123 =gt; "5.12" =gt; 5.12  cart.itemsPrice = toPrice(  cart.cartItems.reduce((a, c) =gt; a   c.qty * c.price, 0)  );  cart.shippingPrice = cart.itemsPrice gt; 39.99 ? toPrice(0) : toPrice(10);  {  cart.taxPrice = toPrice(0.065 * cart.itemsPrice)}  cart.totalPrice = cart.itemsPrice   cart.shippingPrice   cart.taxPrice;   //  const toProfit = (num) =gt; Number(num.toFixed(2)); // 5.123 =gt; "5.12" =gt; 5.12  cart.itemsProfit= toProfit(  cart.cartItems.reduce((a, c) =gt; a   c.qty * c.profit, 0)  );    cart.totalProfit = cart.itemsProfit;  //    const dispatch = useDispatch();  const placeOrderHandler = () =gt; {  dispatch(createOrder({ ...cart, orderItems: cart.cartItems }));  };  useEffect(() =gt; {  if (success) {  props.history.push(`/order/${order._id}`);  dispatch({ type: ORDER_CREATE_RESET });  }  }, [dispatch, order, props.history, success]);  return (  lt;divgt;  lt;CheckoutSteps step1 step2 step3 step4gt;lt;/CheckoutStepsgt;  lt;div className="row top"gt;  lt;div className="col-2"gt;  lt;ulgt;  lt;ligt;  lt;div className="card card-body"gt;  lt;h2gt;Order Itemslt;/h2gt;  lt;ulgt;  {cart.cartItems.map((item) =gt; (  lt;li key={item.product}gt;  lt;div className="row"gt;  lt;divgt;  lt;img  src={item.image}  alt={item.name}  className="small"  gt;lt;/imggt;  lt;/divgt;  lt;div className="min-30"gt;  lt;Link to={`/product/${item.product}`}gt;  {item.name}  lt;/Linkgt;  lt;/divgt;   lt;divgt;  {item.qty} x ${item.price} = ${item.qty * item.price}  lt;/divgt;  lt;/divgt;  lt;/ligt;  ))}  lt;/ulgt;  lt;/divgt;  lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;div className="col-1"gt;  lt;div className="card card-body"gt;  lt;ulgt;  lt;ligt;  lt;h2gt;Order Summarylt;/h2gt;  lt;/ligt;  lt;ligt;  lt;div className="row"gt;  lt;divgt;Itemslt;/divgt;  lt;divgt;${cart.itemsPrice.toFixed(2)}lt;/divgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div className="row"gt;  lt;divgt;Shippinglt;/divgt;  lt;divgt;${cart.shippingPrice.toFixed(2)}lt;/divgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div className="row"gt;  lt;divgt;Taxlt;/divgt;  lt;divgt;${cart.taxPrice.toFixed(2)}lt;/divgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div className="row"gt;  lt;divgt;  lt;stronggt; Order Totallt;/stronggt;  lt;/divgt;  lt;divgt;  lt;stronggt;${cart.totalPrice.toFixed(2)}lt;/stronggt;  lt;/divgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;button  type="button"  onClick={placeOrderHandler}  className="primary block"  disabled={cart.cartItems.length === 0}  gt;  Place Order  lt;/buttongt;  lt;/ligt;  {loading amp;amp; lt;LoadingBoxgt;lt;/LoadingBoxgt;}  {error amp;amp; lt;MessageBox variant="danger"gt;{error}lt;/MessageBoxgt;}  lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  ); }   

Бэкэнд

OrderModel.js

 import mongoose from 'mongoose';  const orderSchema = new mongoose.Schema(  {  orderItems: [  {  name: { type: String, required: true },  qty: { type: Number, required: true },  image: { type: String, required: true },  price: { type: Number, required: true },  profit: { type: Number, required: true },  product: {  type: mongoose.Schema.Types.ObjectId,  ref: 'Product',  required: true,  },  },  ],  shippingAddress: {  fullName: { type: String, required: true },  address: { type: String, required: true },  city: { type: String, required: true },  postalCode: { type: String, required: true },  country: { type: String, required: true },  },  paymentMethod: { type: String, required: true },  paymentResult: {  id: String,  status: String,  update_time: String,  email_address: String,  },  itemsPrice: { type: Number, required: true },  shippingPrice: { type: Number, required: true },  taxPrice: { type: Number, required: true },  totalPrice: { type: Number, required: true },  itemsProfit: { type: Number, required: true },  totalProfit: { type: Number, required: true },  user: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },  seller: { type: mongoose.Schema.Types.ObjectID, ref: 'User' },  isPaid: { type: Boolean, default: false },  paidAt: { type: Date },  isDelivered: { type: Boolean, default: false },  isShipped: {type: Boolean, default: false },  isReturned: {type: Boolean, default: false },  deliveredAt: { type: Date },  shippedAt: { type: Date },  ReturnedAt: { type: Date },  },  {  timestamps: true,  } );     const Order = mongoose.model('Order', orderSchema); export default Order;  

Ошибка типа: Не удается прочитать свойства неопределенного (чтение «исправлено»)

Причина этой ошибки проста буквально.

Когда вы используете toFixed() с какой-то переменной , и эта переменная есть undefined , произошла ошибка.

Я нашел toFixed() в вашем коде много, но нет кода для undefined case.

вы просто добавляете ? вот так

 num?.toFixed(); cart?.totalPrice?.toFixed(2) ...  

Я понял, что получаю эту ошибку, потому что mongodb не регистрировал мою totalProfit переменную, поэтому она рассматривалась как неопределенная.