Reagieren Sie nicht abgerufene API -Daten auf Seite (Daten werden in Console.log angezeigt, aber nicht rendern) ⇐ JavaScript

[Anonymous]

Ich arbeite an einem Hall -Buchungsprojekt und stehe vor einem Problem, bei dem React keine von der Backend -API abgerufenen Daten anzeigt.
Der API -Aufruf ist erfolgreich - Daten zeigen in Konsole richtig. class = "Lang-none hübschprint-override">

Code: Select all

import useUserContext from './useUserContext';
import useApi from './useApi';
import { getUSerData } from './api';

function Home() {
const { loading, error } = useUserContext();
const [data, setData] = useState(null);
const { callApi } = useApi();

const getData = async () => {
try {
const response = await callApi(getUSerData);
console.log("API response:", response);
if (response && response.success) {
setData(response.user);
console.log("Data set:", response.user);
} else {
console.log("DATA NOT FOUND");
setData(null);
}
} catch (err) {
console.error("Error fetching user data:", err);
setData(null);
}
};

return (


HOME


{loading && 
Loading...
}
{error && 
{error}
}


GET DATA


{data ? (

Name: {data.name}
Email: {data.email}
Contact No: {data.contactNo}

) : (
Data Not Found
)}

);
}

Hier ist mein benutzerdefinierter Hook, mit dem API aufgerufen wurde:

Code: Select all

import useUserContext from "./useUserContext";

const useApi = () => {
const { setLoading, setError } = useUserContext();

const callApi = async (apiFunction) => {
try {
setLoading && setLoading(true);
return await apiFunction();
} catch (error) {
setError && setError(error.response?.data?.message || 'Something went wrong');
throw error;
} finally {
setLoading && setLoading(false);
}
};

return { callApi };
};

export default useApi;

Die GetUserData -Methode:

Code: Select all

const getUSerData = async () => {
const response = await axios.get(
`${API_URL}/getuser`,
{ withCredentials: true }
);

return response.data;
}

Hier ist der Ausgangs -Screenshot:
Wenn ich diese direkte Methode verwende, funktioniert und zeigt sie Daten ordnungsgemäß:

Code: Select all

function Home() {
const [userData, setUserData] = React.useState(null);

const getUserData = async () => {
try {
const response = await axios.get(
'http://localhost:3360/api/v1/users/getuser',
{ withCredentials: true }
);
console.log("Data Fetched ", response);
if (response.data && response.data.success) {
setUserData(response.data.user);
} else {
setUserData(null);
}
} catch (error) {
console.log(error);
setUserData(null);
}
}

return (

HOME
Fetch
{userData ? (

User Data:
Name: {userData.name}
Email: {userData.email}
Contact: {userData.contactNo}

) : (
No user data available
)}

);
}

Frage Zusammenfassung:
Der Datenabruf funktioniert und in der Konsole gezeigt. /> Bitte helfen Sie mir zu verstehen: < /p>
Warum funktioniert meine wiederverwendbare Hook -Methode nicht?>