I'm trying to GET a List of Patients from my BE using FormData with Bearer token. When I test on Postman, it resolves just fine, but when I try to send with axios, I constantly get the 400 Error Bad Request, can anyone know the problem ?? this is where I send request in Postman Here is my code for React
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useParams, Link, useNavigate } from 'react-router-dom';
import ReactLoading from 'react-loading';
import { useQuery } from 'react-query';
import { API } from '../../../api/GeneralAPI';
import FetchingError from '../../../Authentication/Views/ErrorView/FetchingError';
import SearchPatientUnderGuide from './SearchPatientUnderGuide';
function FetchPatientUnderGuide() {
const {id} = useParams();
console.log(id)
const navigate = useNavigate();
const url = API + "getAllPatientsOfDoctor"
const token = localStorage.getItem('token');
const fetchPatients = async () => {
let formData = new FormData();
formData.append('id', id)
console.log("ID is: " + formData.get('id'));
console.log(`Bearer ${token}`)
const fetchData = await axios({
method: 'get',
url: url,
headers: {
Authorization: `Bearer ${token}`
},
data : formData})
return fetchData;
}
const query = useQuery('patients', fetchPatients)
return (
<div>
{query.isLoading
? <ReactLoading type="spin" color="#0000FF"
height={100} width={50}/>
: query.isError
? <FetchingError />
: query.data
? <div>
<SearchPatientUnderGuide details = {query.data.data.object} />
</div>
: null}
</div>
);
}
export default FetchPatientUnderGuide
