TypeError: order is undefined - json

Question

I'm very new to react-redux following this tutorial to create ecomme website ,so here's a order screen to place a payment after hitting the place order button but it is showing error saying 'order' is undefined
this is my OrderScreen.js i've tried adding order && in front of order but to no avail it return screen with no listed order items
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
heres my reducer for order:
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
}
}
here's my action for order:
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,
})
}
}
here's my django view to get orders by 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)
i've used the combine reducer to combine the remaining reducer the one that ive used in this que is :
orderDetails: orderDetailsReducer,
constants i've used for state:
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:
path('<str:pk>/', views.getOrderById, name='user-order'),
enter image description here

Answer 1

I solved my issue with change "order.shippingAddress" to "order.ShippingAddress", I just check out the file models.py in the base folder and find out the exact name that is ShippingAddress, then try to run makemigrations and migrate. hope it's help.