Как использовать localstorage.getItem или setItem для отправки post-запроса в приложении react?

Я использую jwt в бэкенде аутентификации. Согласно учебнику, я смог успешно отправить запрос get во фронтенде react, используя следующий код.

export const load_user = () => async (dispatch) => {
if (localStorage.getItem("access")) {
 const config = {
   headers: {
     "Content-Type": "application/json",
     Authorization: `JWT ${localStorage.getItem("access")}`,
     Accept: "application/json",
   },
 };

try {
  const res = await axios.get(
    `${process.env.REACT_APP_API_URL}/api/auth/users/me/`,
    config
  );

  dispatch({
    type: USER_LOADED_SUCCESS,
    payload: res.data,
  });
  } catch (err) {
  dispatch({
    type: USER_LOADED_FAIL,
   });
 }
} else {
  dispatch({
   type: USER_LOADED_FAIL,
  });
 }
};

Однако, я не могу отправить почтовый запрос, я пробовал придумать свой собственный код, но все еще безрезультатно. Вот мой код:

export const client_information_create =
 (age, phone_number, country, city, alergy, gender) => async (dispatch) => {
  if (localStorage.getItem('access')) {
  const config = {
   headers: {
     "Content-Type": "application/json",
     "Authorization": `JWT ${localStorage.getItem('access')}`,
     "Accept": 'application/json'
   },
 };

 const body = JSON.stringify({
   age,
   phone_number,
   country,
   city,
   alergy,
   gender,
 });

 try {
   const res = await axios.post(
     `${process.env.REACT_APP_API_URL}/api/list/InformationView/`,
     body,
     config
   );
   if (res.data != null){
   dispatch({
     type: INFORMATION_SUCCESS,
     payload: res.data,
   });
 } else {
     dispatch({
       type: INFORMATION_FAIL,
     });
  }
 } catch (err) {
   dispatch({
     type: INFORMATION_FAIL,
   });
 }

} };

Как мне это сделать?

После дальнейших модификаций я не могу понять, почему данные не сохраняются в базе данных. Когда я console.log(res.data) я получаю, что пользователь уже существует, что не является проблемой согласно Viewcode. Вместо этого он должен вывести все детали, такие как возраст и номер телефона. Вот код моего файла view.py:

class ClientInformationView(APIView):

def get_object(self, pk):
    try: 
        return ClientInformation.objects.get(pk=pk)
    except ClientInformation.DoesNotExist:
        raise Http404

def get(self, request, pk, format=None):
    client_information = self.get_object(pk)
    serializer = ClientInformationSerializer(client_information)
    return Response(serializer.data)

def post(self, request, format=None):
    try: 
        user = self.request.user
        if user:
            return Response("This Record Already Exists")
        else: 
            information_create = ClientInformation.objects.all()
            serializer = ClientInformationSerializer(information_create)
            if serializer.is_valid():
                serializer.save()
                return Response(serializer.data, status=status.HTTP_201_CREATED)
            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
    except TypeError:
        return Response({
            'error':'Something went wrong when creating data'
        }, status=status.HTTP_403_FORBIDDEN)

Как вывести сами данные во фронтенде

Изменить это:

const body = JSON.stringify({
   age,
   phone_number,
   country,
   city,
   alergy,
   gender,
 });

to

const body = {
   age,
   phone_number,
   country,
   city,
   alergy,
   gender,
 };

Наконец, я нашел решение этого вопроса. Я изменил почтовый запрос в представлениях следующим образом:

def post(self, request, format=None):
        serializer = ClientInformationSerializer(data=request.data,)            
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data,    status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Позднее я получил эту ошибку: Опция fields должна быть списком, кортежем или "all". Чтобы получить список, я модифицировал ClientInformationSerializer следующим образом:

class ClientInformationSerializer(serializers.ModelSerializer):
class Meta:
    model = ClientInformation
    fields = ['user', 'age', 'phone_number', 'country', 'city', 'alergy', 'gender']

Однако за все это пришлось заплатить. Я вижу все необходимые данные в панели администратора, но поле имени пользователя, которое является иностранным ключом, пустое. Как мне сохранить текущего залогиненного пользователя в Django из react?

Вернуться на верх