I am a novice attempting to retrieve data from a database and display it on the front-end using Axios, ReactJS, and TypeScript. My intention is for the data to be rendered specifically on localhost:3000/api/v1/getAll, but currently, it is rendering on all routes. Can anyone guide me in identifying what I might be doing wrong? Thank you.
Below is the axios request function:
export const getAllUsers = async (): Promise<IResponse | IErrorResponse> => {
const axiosClient = AxiosClient.createInstance();
try {
const response = await axiosClient.get("/api/v1/getAll");
return {
success: true,
data: response.data
};
} catch (err) {
console.error(err);
return {
success: false,
data: isAxiosError(err) ? err.message : (err as string)
};
}
};
And here is the ReactJS part of the code:
const App = () => {
const [users, setUsers] = useState<userData[]>([]);
useEffect(() => {
// View browser console for the result
const getUsers = async () => {
const response = await getAllUsers();
if (response.success) {
setUsers(response.data as userData[]);
console.log(response.data);
} else {
throw Error("Cannot fetch"); // temporary error handling
}
};
getUsers()
}, []);
return (
<div>
{users && users.map(user => <li>{user.name}</li>)}
</div>
)
}