型別錯誤。無法解構'order'的'paymentInfo'屬性，因為它是未定義的。 -有解無憂

我是mern stack的新手。我想從訂單串列中顯示單個訂單的詳細資訊。單個訂單的細節已經從資料庫中獲取到redux開發工具。但是這些細節在瀏覽器中沒有顯示，并且說 "TypeError: 不能解構'order'的'paymentInfo'屬性，因為它是未定義的"。非常感謝任何幫助

。

/singleorder.js
import { useDispatch , useSelector } from 'react-redux'/span>
import { getSingleOrder, clearErrors } from './././actions/orderActions'/span>

import './UserSingleOrderCard.css'。
  
const USOCard = ({ match }) => {
      const dispatch = useDispatch();

      const {loading, error, order } = useSelector(state => state.myOrderDetails)
      const {paymentInfo, deliveryInfo, orderStatus,userID,itemsPrice,user,totPrice,orderItems,createdAt,customerName} = order 


      useEffect(() => {
        dispatch(getSingleOrder(match.params.id)）。)

        if（錯誤）{
          dispatch(clearErrors()
        }
      }, [dispatch,error,match.params.id] )

      return (
        <Fragment>/span>
        <div className="USOCCont211"> 
          <h1 className="orderIDtxt"/span>> 訂單ID</h1>。
          <h2 className="orderID">/span>{order. _id}</h2>{order.
          <div className="statsCont211"> 
            <div className="statusCard"/span>>
              <div className="statustxtdiv211"/span>>
                <p className="ststxt"/span>> 支付狀態</p><br/>/span>
                <p className={String(paymentInfo && paymentInfo. paymentStatus).includes('Paid') ? " statustxt211 green211" : "statustxt211 red211" }>{paymentInfo && paymentInfo.paymentStatus}</p><br/>/span>
                <button className={String(paymentInfo && paymentInfo. paymentStatus).includes('Paid') ? "btn211 disabled" : "btn211" }>支付</按鈕>
              </div>/span>
              <div className="tsimgcont211">< img className="tsimg211" src=" 。 /images/uovPayment.png" /></div> 
            </div>/span>
            <div className="statusCard">/span>
              <div className="statustxtdiv211"/span>>
                <p className="ststxt"/span>> 訂單狀態</p><br/>/span>
                <p className={String(order.orderStatus).including('Baked') ? " statustxt211 green211" : String(order.orderStatus).including('Baking') ? " statustxt211 orange211" : "statustxt211 red211" }>{order.orderStatus}</p><br/>
              </div>/span>
              <div className="tsimgcont211">< img className="tsimg211" src=" 。 /images/uovBaking.png" /></div> 
            </div>/span>
            <div className="statusCard">/span>
              <div className="statustxtdiv211"/span>>
                <p className="ststxt"/span>> 交付狀態</p><br/>>
                <p className={String(deliveryInfo && deliveryInfo。 deliverStatus).includes('Delivered' ) ? " statustxt211 green211" : String(deliveryInfo & & deliveryInfo. deliverStatus).includes('Delivering') ? " statustxt211 orange211" : "statustxt211 red211" }>{deliveryInfo && deliveryInfo.deliveryStatuss}</p><br/>
                <button className="btn211"/span>> 反饋</button> 
              </div>/span>
              <div className="tsimgcont211">< img className="tsimg211" src=" 。 /images/uovDeliver.png" /></div> 
            </div>/span>
          </div>/span>
          <div className="DeliveryInfoUpdate211">/span>
            <p className="oddivtxt211"/span>> 訂單詳情</p> 
            <center>/span>
              <form> 
                <table> 
                  <tbody><tr> 
                      <td className="tbleleft211"/span>> 客戶名稱</td>
                      <td className="tbleleft213">/span>{order. customerName}</td>{order.
                    </tr>/span>
                    <tr>/span>
                      <td className="tbleleft211"/span>> 創建于</td>。
                      <td className="tbleleft213">/span>{order. createdAt}</td>{order.
                    </tr>/span>
                    <tr>/span>
                      <td className="tbleleft211"/span>> 電話號碼</td>。
                      <td className="tbleleft212">/span>< input className="form__field" type="text" placeholder={user& & 用戶。 phone_no} /></td>>
                    </tr>/span>
                    <tr>/span>
                      <td className="tbleleft211"/span>> 交付地址</td>
                      <td className="tbleleft212">/span><。 input className="form__field" type="text" placeholder={deliveryInfo & & deliveryInfo. 送貨地址} /></td>>
                    </tr>/span>
                  </tbody></table> <br /><br />
                <button className="btn212"/span>> 更新細節</按鈕>
              </form></center> 
          </div> 
          <div className="ordcaktxt211">/span>
            <p>Ordered Cakies </p>/span>
          </div>/span>
          <div>/span>
            <div className="tableContainer">/span>
              <ul className=" responsive-table">
                <li className="table-header"> 
                  <div className="col col-1"/span>> 產品名稱</div>。
                  <div className="col col-2"/span>> 尺寸</div>。
                  <div className="col col-3"/span>> Topping</div>。
                  <div className="col col-4"/span>> Qty</div>。
                  <div className="col col-5"/span>> 價格</div> 
                </li>/span>

                {orderItems && orderItems.map(item => (
                <li className="table-row">
                  < div className="col col-1" data-label="Product Name"> {item. product_name}</div>{item.
                  < div className="col col-2" data-label="Size">{item. size}</div>{item.
                  < div className="col col-3" data-label="topping" >{item. topping}</div>{item.
                  < div className="col col col-4" data-label="quantity">/span>{item. qty}</div>{item.
                  < div className="col col-5" data-label="Price">/span>{item. itemsPrice}</div>{item.
                </li>/span>
                 ))}

              </ul> ))。
              <center> < div className="totAmnt211"> 總金額。{order.totPrice}</div> </center>
            </div>/span>
          </div>/span>
          <div className="footer211"> 
            <button className="btnfoot213"/span>> 回傳訂單</button> 
            <button className="btnfoot214"/span>> 洗掉訂單</button> 
          </div>/span>
        </div>/span>
        <br/><br/>
        </Fragment>
  )
}
          
export default USOCard

//action.js
//用戶獲得單個訂單的詳細資訊。
export const getSingleOrder = (id) => async （dispatch）=> {
    try{
        dispatch ({ type:ORDER_DETAILS_REQUEST }) 。
        const { data } = await axios.get(`/api/v1/order/${id}`)
        dispatch（{
            type:ORDER_DETAILS_SUCCESS,
            payload:data.order。
            
        })
    } catch(error) {
        dispatch（{
            type:ORDER_DETAILS_FAIL。
            payload: error.response.data.message。
        })

    }

uj5u.com熱心網友回復：

這里的問題是，你沒有處理資料的加載。在資料被獲取之前，變數順序將是未定義的，它向你拋出了這個錯誤，因為你正試圖從未定義的屬性中解除結構。有一堆不同的事情你可以做。我建議你添加這樣的東西......

const USOCard=（{ match }）=> { const dispatch = useDispatch(); const {loading, error, order } = useSelector(state => state.myOrderDetails) useEffect(() => { dispatch(getSingleOrder(match.params.id)）。) if（錯誤）{ dispatch(clearErrors() } }, [dispatch,error,match.params.id] ) if (!order) { return null { } const {paymentInfo, deliveryInfo, orderStatus,userID,itemsPrice,user,totPrice,orderItems,createdAt,customerName} = order return ( <Fragment> <div className="USOCCont211"> <h1 className="orderIDtxt">Or......

uj5u.com熱心網友回復：

你有這樣的錯誤是因為你試圖訪問一個還沒有被取走的order，你必須通過檢查loading道具是否為假來檢查資料是否被取走：

問題

const {loading, error, order } = useSelector(>state => 狀態。 myOrderDetails)  // <===此刻資料還沒有被取走，所以訂單是空的。

解決方案

 let paymentInfo,
        deliveryInfo,
        orderStatus。
        userID。
        itemsPrice。
        用戶。
        總價。
        orderItems,
        createdAt,
        customerName。
    
      if (!loading) {
        paymentInfo = order.paymentInfo。
        deliveryInfo = order.deliveryInfo;
        orderStatus = order.orderStatus;
        userID = order.userID;
        itemsPrice = order.itemsPrice;
        user = order.user;
        totPrice = order.totPrice;
        orderItems = order.orderItems;
        createdAt = order.createdAt;
        customerName = order.customerName。
      }

你的組件

/singleorder.js
import { useDispatch, useSelector } from 'react-redux'/span>;
import { getSingleOrder, clearErrors } from './././actions/orderActions'。

import './UserSingleOrderCard.css';

const USOCard = ({ match }) => {
  const dispatch = useDispatch();
  const { loading, error, order } = useSelector(
    (state) => state.myOrderDetails.
  );
  let paymentInfo,
    交付資訊。
    orderStatus。
    userID。
    itemsPrice。
    用戶。
    總價。
    orderItems,
    createdAt,
    customerName。

  if (!loading) {
    paymentInfo = order.paymentInfo。
    deliveryInfo = order.deliveryInfo;
    orderStatus = order.orderStatus;
    userID = order.userID;
    itemsPrice = order.itemsPrice;
    user = order.user;
    totPrice = order.totPrice;
    orderItems = order.orderItems;
    createdAt = order.createdAt;
    customerName = order.customerName。
  }

  useEffect(() => {
    dispatch(getSingleOrder(match.params.id) ）。)

    if（錯誤） {
      dispatch(clearErrors()) 。
    }
  }, [dispatch, error, match.params.id]）。)

  return (
    <Fragment>/span>
      {加載？
        <div>Loading...</div>
      ) : (
        <div className="USOCCont211"> ) : (
          <h1 className="orderIDtxt"/span>> 訂單ID</h1>。
          <h2 className="orderID">/span>{order. _id}</h2>{order.
          <div className="statsCont211"> 
            <div className="statusCard"/span>>
              <div className="statustxtdiv211"/span>>
                <p className="ststxt"/span>> 支付狀態</p> 
                <br />/span>
                <p 
                  className={}。
                    String(paymentInfo && paymentInfo.paymentStatus).including(
                      'Paid'
                    )
                      ? ' statustxt211 green211'
                      : 'statustxt211 red211'
                  }
                >
                  {paymentInfo && paymentInfo.paymentStatus}。
                </p> 
                <br />/span>
                <button 
                  className={}。
                    String(paymentInfo && paymentInfo.paymentStatus).including(
                      'Paid'
                    )
                      ? 'btn211 disabled'
                      : 'btn211'
                  }
                >
                  支付
                </button> 
              </div>/span>
              <div className="tsimgcont211">
                <img className="tsimg211" src=" 。 /images/uovPayment.png" />。
              </div> 
            </div>/span>
            <div className="statusCard">/span>
              <div className="statustxtdiv211"/span>>
                <p className="ststxt"/span>> 訂單狀態</p> 
                <br />/span>
                <p 
                  className={}。
                    String(order.orderStatus).includes('Baked' )
                      ? ' statustxt211 green211'
                      : String(order.orderStatus).including('Baking' )
                      ? ' statustxt211 orange211'
                      : 'statustxt211 red211'
                  }
                >
                  {order.orderStatus}}的情況
                </p>{order.orderStatus}>
                <br />/span>
              </div>/span>
              <div className="tsimgcont211">
                <img className="tsimg211" src=" 。 /images/uovBaking.png" />。
              </div> 
            </div>/span>
            <div className="statusCard">/span>
              <div className="statustxtdiv211"/span>>
                <p className="ststxt"/span>> 交付狀態</p>。
                <br />/span>
                <p 
                  className={}。
                    String(deliveryInfo && deliveryInfo.deliveryStatus).including(
                      'Delivered'
                    )
                      ? ' statustxt211 green211'
                      : String(
                          deliveryInfo && deliveryInfo.deliveryStatus.includes('Delivering' )
                      ? ' statustxt211 orange211'
                      : 'statustxt211 red211'
                  }
                >
                  {deliveryInfo && deliveryInfo.deliveryStatuss}。
                </p> 
                <br />/span>
                <button className="btn211"/span>> 反饋</button> 
              </div>/span>
              <div className="tsimgcont211">
                <img className="tsimg211" src=" 。 /images/uovDeliver.png" />。
              </div> 
            </div>/span>
          </div>/span>
          <div className="DeliveryInfoUpdate211">/span>
            <p className="oddivtxt211"/span>> 訂單詳情</p> 
            <center>/span>
              <form> 
                <table> 
                  <tbody> 
                    <tr>/span>
                      <td className="tbleleft211"/span>> 客戶名稱</td>
                      <td className="tbleleft213">/span>{order. customerName}</td>{order.
                    </tr>/span>
                    <tr>/span>
                      <td className="tbleleft211"/span>> 創建于</td>。
                      <td className="tbleleft213">/span>{order. createdAt}</td>{order.
                    </tr>/span>
                    <tr>/span>
                      <td className="tbleleft211"/span>> 電話號碼</td>。
                      <td className="tbleleft212">/span>
                        <input
                          className="form__field"。
                          type="text"/span>
                          placeholder={user && user.phone_no}。
                        />
                      </td> 
                    </tr>/span>
                    <tr>/span>
                      <td className="tbleleft211"/span>> 交付地址</td>
                      <td className="tbleleft212">/span>
                        <input
                          className="form__field"。
                          type="text"/span>
                          placeholder={}。
                            deliveryInfo && deliveryInfo.deliveryAddress。
                          }
                        />
                      </td> 
                    </tr>/span>
                  </tbody>/span>
                </table>/span>
                <br />/span>
                <br />>
                <button className="btn212"/span>> 更新細節</按鈕>
              </form>/span>
            </center> 
          </div>/span>
          <div className="ordcaktxt211">/span>
            <p>Ordered Cakies </p>/span>
          </div>/span>
          <div>/span>
            <div className="tableContainer">/span>
              <ul className=" responsive-table">
                <li className="table-header"> 
                  <div className="col col-1"/span>> 產品名稱</div>。
                  <div className="col col-2"/span>> 尺寸</div>。
                  <div className="col col-3"/span>> Topping</div>。
                  <div className="col col-4"/span>> Qty</div>。
                  <div className="col col-5"/span>> 價格</div> 
                </li>/span>

                {orderItems&&
                  orderItems.map((item) => (
                    <li className="table-row">
                      < div className="col col-1" data-label="產品名稱">
                        {item.product_name}
                      </div> {item.product_name}
                      < div className="col col-2" data-label="Size"> 
                        {item.size}
                      </div> {item.size}
                      < div className="col col-3" data-label="topping">/span>
                        {item.topping}
                      </div> {item.topping}
                      < div className="col col col-4" data-label="Want">
                        {item.qty}
                      </div> {item.qty}
                      < div className="col col-5" data-label="Price"> 
                        {item.itemsPrice}。
                      </div> {item.itemsPrice}
                    </li>/span>
                  ))}
              </ul> ))。
              <center>/span>
                {' '}
                <div className="totAmnt211"/span>>
                  總金額。{order.totPrice}
                </div>{' '}。
              </center>{'}。
            </div>/span>
          </div>/span>
          <div className="footer211"> 
            <button className="btnfoot213"/span>> 回傳訂單</button> 
            <button className="btnfoot214"/span>> 洗掉訂單</button> 
          </div>/span>
        </div>/span>
      )}
      
      <br />/span>
    </Fragment>
  );
};

export default USOCard;

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/324692.html

標籤：

上一篇：對事務串列具有多個連接條件的SQL請求（postgreSQL）

下一篇：試圖找到方法來更新Taskscheduler中現有任務的"描述"引數。