React+Redux：请求失败，状态码为 500

Question

我是 React 和 redux 的新手。我正在使用 React/Redux 和 Django 构建一个简单的电子商务应用程序。我面临一个我无法解决的问题。问题是每当我点击下订单按钮时​​，它都会显示me 请求失败，状态代码为 500here is the error image 作为应用中的消息。浏览器中的 Redux 检查器显示 ORDER_CREATE_FAIL like this 常量。但是 API 正在将数据传递到数据库中，但没有重定向到 /order/${order._id} 页面。为什么会发生这种情况。解决方案是什么？

PlaceOrderScreen.js

import React,{useState,useEffect} from 'react'
import { Button,Row,Col,ListGroup,Image,Card } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import Message from '../components/Message'
import CheckoutSteps from '../components/CheckoutSteps'
import { createOrder } from '../actions/orderActions'


function PlaceOrderScreen({ history }) {
    
    const orderCreate = useSelector(state=>state.orderCreate)
    const { order, error ,success} = orderCreate
    
    const dispatch = useDispatch()
    
    const cart = useSelector(state =>state.cart)
    
    cart.itemsPrice = cart.cartItems.reduce((acc, item) => acc + item.price * item.qty, 0)
    cart.shippingPrice = cart.shippingAddress.city === ('Dhaka' || 'dhaka') ? 50 : 120
    cart.taxPrice = Number((0.015) * cart.itemsPrice)
    
    cart.totalPrice=Number(cart.itemsPrice) + Number(cart.shippingPrice) + Number(cart.taxPrice)
    
    if(!cart.paymentMethod){
        history.push('/payment')
    }
    
    useEffect(() => {
        if(success){
            history.push(`/order/${order._id}`)
        }
    }, [success,history])
    
    const placeOrder = () =>{
        dispatch(createOrder({
            orderItems:cart.cartItems,
            shippingAddress:cart.shippingAddress,
            paymentMethod:cart.paymentMethod,
            itemsPrice:cart.itemsPrice,
            shippingPrice:cart.shippingPrice,
            taxPrice:cart.taxPrice,
            totalPrice:cart.taxPrice,
            
        }))
    }
    
    return (
        <div>
            <CheckoutSteps step1 step2 step3 step4 />
            <Row>
                <Col md={8}>
                    <ListGroup variant='flush'>
                        <ListGroup.Item>
                            <h2>Shipping</h2>
                            
                            <p>
                                <strong>Shipping to: {cart.shippingAddress.address}, {cart.shippingAddress.city}</strong>
                                {'  '}
                                {cart.shippingAddress.postalCode},
                                {'  '}
                                {cart.shippingAddress.country},
                                {'  '}
                                Phone: {cart.shippingAddress.phone}
                            </p>
                        </ListGroup.Item>
                        
                        <ListGroup.Item>
                            <h2>Payment Method</h2>                            
                            <p>
                                <strong>Payment: </strong>
                                {cart.paymentMethod}
                               
                            </p>
                        </ListGroup.Item>
                        
                        <ListGroup.Item>
                            <h2>Order Items</h2>                            
                            {cart.cartItems.length === 0 ? <Message variant='info'>
                                Your cart is empty
                             </Message> : (
                                 <ListGroup variant='flush'>
                                     {cart.cartItems.map((item, index)=>(
                                         <ListGroup.Item key={index}>
                                             <Row>
                                                <Col md={1}>
                                                    <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)}
                                                </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>৳{cart.itemsPrice}</Col>
                               </Row>
                            </ListGroup.Item>
                            
                            <ListGroup.Item>
                               <Row>
                                   <Col>Shipping Charge:</Col>
                                   <Col>৳{cart.shippingPrice}</Col>
                               </Row>
                            </ListGroup.Item>
                            
                            <ListGroup.Item>
                               <Row>
                                   <Col>VAT 1.5%:</Col>
                                   <Col>৳{cart.taxPrice}</Col>
                               </Row>
                            </ListGroup.Item>
                            
                            <ListGroup.Item>
                               <Row>
                                   <Col>Total:</Col>
                                   <Col>৳{cart.totalPrice}</Col>
                               </Row>
                            </ListGroup.Item>
                            
                            <ListGroup.Item>
                                {error && <Message variant='danger'>{error}</Message>}
                            </ListGroup.Item>
                            
                            <ListGroup.Item>
                               <Button
                                   type='button'
                                   className='btn-black'
                                   disabled={cart.cartItems === 0}
                                   onClick={placeOrder}
                               >
                                    Place Order
                               </Button>
                            </ListGroup.Item>
                            
                        </ListGroup>
                    </Card>
                </Col>
            </Row>
        </div>
    )
}

export default PlaceOrderScreen

orderActions.js

import axios from 'axios'
import { 
    ORDER_CREATE_REQUEST, 
    ORDER_CREATE_SUCCESS,
    ORDER_CREATE_FAIL 
    } from '../constants/orderConstants'

    export const createOrder = (order) => async (dispatch, getState) => {
        try{
            dispatch({
                type:ORDER_CREATE_REQUEST
            })
            
            const {
                userLogin: { userInfo },
            } = getState()
            
            const config={
                headers:{
                    'Content-type': 'application/json',
                    Authorization : `Bearer ${userInfo.token}` //Authorization Token 
                }
            }
            
            const {data} = await axios.post(
                'http://127.0.0.1:8000/api/orders/add/',
                order,
                config,
                )
            
            dispatch({
                type:ORDER_CREATE_SUCCESS,
                payload:data
            })
                    
            
        }catch(error){
            dispatch({
                type:ORDER_CREATE_FAIL,
                payload:error.response && error.response.data.detail
                ? error.response.data.detail
                :error.message,
            })
        }
    }

orderReducers.js

import { ORDER_CREATE_REQUEST, 
         ORDER_CREATE_SUCCESS,
         ORDER_CREATE_FAIL 
         } from '../constants/orderConstants'

export const orderCreateReducer = (state={}, action)=>{
    switch(action.type){
        case ORDER_CREATE_REQUEST:
            return {
                loading:true
            }
            
        case ORDER_CREATE_SUCCESS:
            return {
                loading:false,
                success:true,
                order:action.payload
            }
            
        case ORDER_CREATE_FAIL:
            return {
                loading:false,
                error:action.payload
            }
            
        default:
            return state
            
        
    }
}