React Не отображает извлекаемые данные API на странице (данные показывают в console.log, но не рендеринг) ⇐ Javascript

[Anonymous]

Я работаю над проектом бронирования зала, и я сталкиваюсь с проблемой, в которой React не отображает данные, извлеченные из API бэкэнд. Class = "Lang-None PrettyPrint-Override">

Код: Выделить всё

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
)}

);
}

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

Код: Выделить всё

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;

Метод GetUserData:

Код: Выделить всё

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

return response.data;
}

Вот выходной скриншот:
Теперь, если я использую этот прямой метод, он работает и отображает данные правильно:

Код: Выделить всё

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
)}

);
}

Сводка вопросов:
извлечение данных работает и показано в консоли.
, но в моем методе повторного использования данные не отображаются в UI.
Когда я использую Axios.gret () непосредственно внутри Component. /> Помогите мне понять: < /p>
Почему мой многоразовый метод крюка не работает?>

Подробнее здесь: https://stackoverflow.com/questions/795 ... og-but-not