Как остановить несколько вызовов API при получении данных сеанса в приложении React? ⇐ Javascript

[Anonymous]

У меня есть следующий код: < /p>

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

import React, { useState, useEffect } from 'react';
import { Route, Redirect } from 'react-router-dom';
import axios from 'axios'; // or fetch
const calledRef = useRef(false);
const ProtectedRoute = ({ path, component: Component, render, ...rest }) => {
const [isAuth, setIsAuth] = useState(null); // null = loading

useEffect(() => {
const checkAuth = async () => {
try {
const response = await axios.get('/api/user/session'); // your Node.js endpoint
setIsAuth((response.data.status === "ok"));
} catch (error) {
setIsAuth(false);
}
};
checkAuth();
}, []);

// While waiting for the API response, you can show a loading spinner or nothing
if (isAuth === null) return Loading...;

return (
 {
if (isAuth) {
return Component ?  : render(props);
} else {
return ;
}
}}
/>
);
};

export default ProtectedRoute;
< /code>
У меня есть бэкэнд Node.js и React Frontend. Я пытаюсь использовать код Frontend, чтобы вызвать бэкэнд, чтобы увидеть, входит ли пользователь. К сожалению, код делает несколько запросов на бэкэнд, поэтому загружающий текст рендесирует несколько раз. < /P>
Вот как я использую код: < /p>
class App extends Component {
render() {
return (







)
}

Как остановить код ProtectectRoute сделать несколько вызовов API в/api/user/session ? Я попытался использовать useref , но это не сработало.


Подробнее здесь: https://stackoverflow.com/questions/797 ... pplication