我无法验证错误到我的UI我想要的具体错误，如果用户名是相同的错误将是用户名不存在
我的后端代码
我的Urls.py

from django.urls import path
from . views import *

from rest_framework_simplejwt.views import (    
    TokenRefreshView,
)

urlpatterns = [
    path('', getRoutes),
    path('token/', MyTokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
    path('register/', UserRegistrationView.as_view(), name='user_registration'),
]

字符串
I have simple serializer我的Serializers.py

from rest_framework import serializers
from django.contrib.auth.models import User

class UserRegistrationSerializer(serializers.ModelSerializer):

    class Meta:
        model = User
        fields = ['username', 'email', 'password']

型
我的Views.py

from rest_framework.response import Response
from rest_framework.decorators import api_view
from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
from rest_framework_simplejwt.views import TokenObtainPairView
from django.contrib.auth.models import User
from rest_framework import status
from rest_framework.views import APIView
from .serializer import UserRegistrationSerializer
from django.core.exceptions import ValidationError

class MyTokenObtainPairSerializer(TokenObtainPairSerializer):
    @classmethod
    def get_token(cls, user):
        token = super().get_token(user)

        # Add custom claims
        token['username'] = user.username
        # ...

        return token
class MyTokenObtainPairView(TokenObtainPairView):
    serializer_class = MyTokenObtainPairSerializer

@api_view(['GET'])
def getRoutes(request):
    routes = [
        '/api/token',
        '/api/token/refresh',
    ]
    return Response(routes)

class UserRegistrationView(APIView):
     def post(self, request):
        serializer = UserRegistrationSerializer(data=request.data)

        if serializer.is_valid():
            username = serializer.validated_data['username']
            password = serializer.validated_data['password']
            email = serializer.validated_data['email']
            phone = serializer.validated_data['phone']

            # Check if username already exists
            if User.objects.filter(username=username).exists():
                return Response({'error': 'Username already exists'}, status=status.HTTP_400_BAD_REQUEST)

            # Check if email already exists
            if User.objects.filter(email=email).exists():
                return Response({'error': 'Email already exists'}, status=status.HTTP_400_BAD_REQUEST)

            # Check if phone number already exists
            if User.objects.filter(phone=phone).exists():
                return Response({'error': 'Phone number already exists'}, status=status.HTTP_400_BAD_REQUEST)

            # Check if password and confirm_password match
            if 'confirm_password' not in request.data or password != request.data['confirm_password']:
                return Response({'error': 'Passwords do not match'}, status=status.HTTP_400_BAD_REQUEST)

            # Create a new user instance
            user = User.objects.create_user(
                username=username,
                password=password,
                email=email,
                phone=phone
            )
            # Optionally, you can add more custom fields to the User model and set them here

            return Response({'message': 'User registered successfully'}, status=status.HTTP_201_CREATED)
        else:
            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

型
我的前端与Daisy Ui和Tailwind一起使用React Vite
在My AuthContext文件中
使用fetch命中API

const registerUser = async (formData) => {
      try {
        console.log('Registration request data:', formData);
        const response = await fetch('http://127.0.0.1:8000/api/register/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(formData),
        });
    
        const data = await response.json();
    
        if (response.ok) {
          // Registration successful
          // Perform any necessary actions, e.g., redirect the user to a success page or show a success message
          console.log('Registration successful!');
          navigate('/'); // You can redirect to a success page
        } else {
          // Registration failed due to client-side validation error or server error
          // You can handle the error, e.g., show an error message
          console.log('Registration failed due to error');
          console.log('Error response data:', data); // Log the full error response
    
          // Check if the response contains a detailed error message
          if (data && data.error) {
            alert('Registration failed: ' + data.error);
          } else {
            // alert('Registration failed. Something went wrong!');
          }
        }
      } catch (error) {
        console.error('Error occurred during registration:', error);
        alert('Something went wrong!');
      }
    };

型
我的Register.jsx页面

import { useContext, useState } from "react";
import AuthContext from "../context/AuthContext";

const Register = () => {
  const [formData, setFormData] = useState({
    name: "",
    username: "",
    email: "",
    phone: "",
    password: "",
    confirmPassword: "",
  });

  const [errors, setErrors] = useState({});

  let { registerUser } = useContext(AuthContext);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    // Call the loginUser function with formData
    const response = await registerUser(formData);
    if (response && response.error) {
      setErrors(response.error);
    } else {
      setErrors({});
    }
  };

  return (
    <>
      <form
        onSubmit={handleSubmit}
        className="container w-[100vw] h-[calc(100vh-64.8px)] m-auto flex flex-col justify-center items-center bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"
      >
        <div className="form-control w-[80%] max-w-xs relative ">
          <h1 className="text-center text-3xl">Register</h1>
          <br />
          <span className="fa-solid fa-user text-xl absolute bottom-2 left-2 text-white "></span>
          {errors.username && <div>{errors.username}</div>}
          {errors.email && <div>{errors.email}</div>}
          {errors.phone && <div>{errors.phone}</div>}
          {errors.password && <div>{errors.password}</div>}
          {errors.confirm_password && <div>{errors.confirm_password}</div>}
          <input
            type="text"
            name="name"
            placeholder="Name"
            className="input input-bordered w-full h-11 max-w-xs pl-8 opacity-40 text-black"
            onChange={handleChange}
          />
        </div>
        <br />
        <div className="form-control w-[80%] max-w-xs relative ">
          <span className="fa-solid fa-user text-xl absolute bottom-2 left-2 text-white "></span>
          <input
            type="text"
            name="username"
            placeholder="Username"
            className="input input-bordered w-full h-11 max-w-xs pl-8 opacity-40 text-black"
            onChange={handleChange}
          />
        </div>
        <br />
        <div className="form-control w-[80%] max-w-xs relative ">
          <span className="fa-regular fa-envelope text-xl absolute bottom-2 left-2 text-white "></span>
          <input
            type="email"
            name="email"
            placeholder="Email"
            className="input input-bordered w-full h-11 max-w-xs pl-8 opacity-40 text-black"
            onChange={handleChange}
          />
        </div>
        <br />
        <div className="form-control w-[80%] max-w-xs relative ">
          <span className="fa-solid fa-phone text-xl absolute bottom-2 left-2 text-white "></span>
          <input
            type="tel"
            name="phone"
            placeholder="Mobile Number"
            className="input input-bordered w-full h-11 max-w-xs pl-8 opacity-40 text-black"
            onChange={handleChange}
          />
        </div>
        <br />
        <div className="form-control w-[80%] max-w-xs relative">
          <span className="fa-solid fa-lock text-xl absolute bottom-2 left-2 text-white "></span>
          <input
            type="password"
            name="password"
            placeholder="Password"
            className="input input-bordered w-full h-11 max-w-xs pl-8 opacity-40 text-black"
            onChange={handleChange}
          />
        </div>
        <br />
        <div className="form-control w-[80%] max-w-xs relative">
          <span className="fa-solid fa-lock text-xl absolute bottom-2 left-2 text-white "></span>
          <input
            type="password"
            name="confirm-password"
            placeholder="Confirm Password"
            className="input input-bordered w-full h-11 max-w-xs pl-8 opacity-40 text-black"
            onChange={handleChange}
          />
        </div>
        <br />
        <button className="btn opacity-80 w-[32%] rounded-xl" type="submit">
          Register
        </button>
      </form>
    </>
  );
};

export default Register;

型
请给予解决方案
我期待错误消息应显示在用户界面上