TypeError:顺序未定义

Question

我对按照本教程创建电子商务网站的react redux非常陌生，所以这里有一个点击下单按钮后付款的订单屏幕，但它显示错误，说"订单"未定义这是我的OrderScreen.js，我试着添加订单&amp；在订单前面，但没有用它返回屏幕没有列出的订单项目

import React ,{useEffect,useState}from 'react'
import { Link } from 'react-router-dom'
import { useDispatch,useSelector } from 'react-redux'
import { Row,Col,ListGroup,Image,Card,Button } from 'react-bootstrap'
import Loader from '../components/Loader'
import Message from '../components/Message'
import { getOrderDetails } from '../actions/orderActions'
//import axios from 'axios'
function OrderScreen({match}) {
const orderId=match.params.id
const orderDetails=useSelector(state=>state.orderDetails)
const{order,error,loading}=orderDetails
const dispatch = useDispatch()

if (!loading && !error){
order.itemsPrice=order.orderItems.reduce((acc,item)=>acc+item.price*item.qty,0).toFixed(2)
}

useEffect(()=>{

if ( !order || order._id !== Number(orderId)){
dispatch (getOrderDetails(orderId))
}

},[dispatch,order,orderId])

return (
<div>

<Col md={8}>
<ListGroup variant='flush'>
<ListGroup.Item>
<h2>Shipping</h2>
<p>
<strong>Shipping:</strong>
{ order.shippingAddress.address},{ order.shippingAddress.city}
{' '}
{ order.shippingAddress.postalCode},
{' '}
{ order.shippingAddress.country}
</p>
</ListGroup.Item>
<ListGroup.Item>
<h2>Payment Method</h2>
<p>
<strong>Method:</strong>
{ order.paymentMethod}

</p>
</ListGroup.Item>
<ListGroup.Item>
<h2>Order Items</h2>
{order.orderItems.length===0 ?
<h3>Your order is empty</h3> 
:(
<ListGroup varaint='flush'>
{ order.orderItems.map((item,index)=>
<ListGroup.Item key={index}>
<Row>
<Col md={2}>
<Image src={item.image} alt={item.name} fluid rounded/>
</Col>
<Col>
<Link to={`/product/${item.product}`}>{item.name}</Link>
</Col>
<Col md={4}>
{item.qty} X ${item.price}=${(item.qty*item.price).toFixed(2)}
</Col>
</Row>
</ListGroup.Item>
)}
</ListGroup>
)}
</ListGroup.Item>
</ListGroup>
</Col>
<Col md={4}>
<Card>
<ListGroup variant='flush'>
<ListGroup.Item>
<h2>Order Summary</h2>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>Item:</Col>
<Col>${  order.itemsPrice}</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>Shipping:</Col>
<Col>${ order.shippingPrice}</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>Shipping:</Col>
<Col>${ order.taxPrice}</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>Total:</Col>
<Col>${ order.totalPrice}</Col>
</Row>
</ListGroup.Item>


</ListGroup>
</Card>
</Col>
</div>
)
}
export default OrderScreen

这是我的减速器订单：

export const orderDetailsReducer = (state = { loading: true, orderItems: [], shippingAddress: {} }, action) => {
switch (action.type) {
case ORDER_DETAILS_REQUEST:
return {
...state,
loading: true
}
case ORDER_DETAILS_SUCCESS:
return {
loading: false,
order: action.payload
}
case ORDER_DETAILS_FAIL:
return {
loading: false,
error: action.payload
}
default:
return state
}
}

这是我的订单：

export const getOrderDetails = (id) => async (dispatch, getState) => {
try {
dispatch({
type: ORDER_DETAILS_REQUEST
})
const {
userLogin: { userInfo },
} = getState()
const config = {
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${userInfo.token}`
}
}
const { data } = await axios.get(
`/api/orders/${id}/`,
config
)
dispatch({
type: ORDER_DETAILS_SUCCESS,
payload: data
})

} catch (error) {
dispatch({
type: ORDER_DETAILS_FAIL,
payload: error.response && error.response.data.detail
? error.response.data.detail
: error.message,
})
}
}

这是我的django视图，可以通过id:获得订单

@api_view(['GET'])
@permission_classes([IsAuthenticated])
def getOrderById(request, pk):
user = request.user
try:
order = Order.objects.get(_id=pk)
if user.is_staff or order.user == user:
serializer = OrderSerializer(order, many=False)
return Response(serializer.data)
else:
Response({'detail': 'Not authorized to view this order'},
status=status.HTTP_400_BAD_REQUEST)
except:
return Response({'detail': 'Order does not exist'}, status=status.HTTP_400_BAD_REQUEST)

我用了联合减速器来组合剩下的减速器，我在这篇文章中使用的是：

orderDetails: orderDetailsReducer,

我用于状态的常量：

export const ORDER_DETAILS_REQUEST = 'ORDER_DETAILS_REQUEST'
export const ORDER_DETAILS_SUCCESS = 'ORDER_DETAILS_SUCCESS'
export const ORDER_DETAILS_FAIL = 'ORDER_DETAILS_FAIL'

django url路径：

path('<str:pk>/', views.getOrderById, name='user-order'),

在此处输入图像描述

Answer 1

我用更改解决了我的问题"order.shippingAddress"；至"；顺序ShippingAddress"；，我只是检查了基本文件夹中的文件models.py，找到了ShippingAddress的确切名称，然后尝试运行makemigrations和migrate。希望能有所帮助。