Проблема синхронизации в React.js для отображения содержимого из API Express.js
У меня проблема со временем в React.js
У меня есть компонент, который проверяет действительность пользователя. Токен и тип пользователя, а если он является администратором, отображают содержимое, а если нет, то «у вас нет разрешения».
Но когда пользователь является администратором, сначала компонент показывает «у вас нет разрешения» и сразу отображает содержимое.
Я думаю, что это асинхронная проблема, потому что требуется некоторое время, чтобы получить тип пользователя из бэкэнда, как это исправить в React.js
Мой компонент выглядит так:
export default function Component() {
useEffect(() => {
axios
.post(`http://${process.env.REACT_APP_RUN}:3001/api/token/status`, {
token,
})
.then((response) => {
setvalidtoken(response.data);
});
}, []);
if (!token || validtoken.valid === "false") {
window.location.replace(`http://${process.env.REACT_APP_RUN}:3000/login`);
} else if (validtoken.type !== "admin") {
return (
<>
<Navbar />
<div className = "premission-denied-holder">
<div className = "premission-denied-ithed">
<h6 className = "text-premisson">you dont have premission</h6>
</div>
</div>
</>
);
} else {
return <h1>some content here</h1>;
}
}
Я попытался изменить последовательность
Вы можете добавить компонент, показывающий «загружается» во время запроса API.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я предлагаю вам добавить состояние isloading:
export default function Component() {
const [isLoading,SetIsLoading] = useState(false);
useEffect(() => {
SetIsLoading(false)
axios
.post(`http://${process.env.REACT_APP_RUN}:3001/api/token/status`, {
token,
})
.then((response) => {
setvalidtoken(response.data);
setIsLoading(true)
});
}, []);
if (isLoading){
if (!token || validtoken.valid === "false") {
window.location.replace(`http://${process.env.REACT_APP_RUN}:3000/login`);
} else if (validtoken.type !== "admin") {
return (
<>
<Navbar />
<div className = "premission-denied-holder">
<div className = "premission-denied-ithed">
<h6 className = "text-premisson">you dont have premission</h6>
</div>
</div>
</>
);
} else {
return <h1>some content here</h1>;
}
}
}
Вам нужно отслеживать, завершен ли запрос API или нет. Вы можете либо добавить новую часть состояния с именем что-то вроде isLoading, которое по умолчанию равно true и устанавливается на false, когда вызов API завершается, и использовать его для отображения заполнителя загрузки, или вы можете просто вернуться раньше, если validtoken еще не установлено ( предполагая, что он не определен, пока не будет установлен в вызове API).
if (!validtoken) return <p>Loading...</p>
Если вы не используете загрузчик, используйте его до тех пор, пока ваш API не станет успешным, чтобы ваш загрузчик был виден в месте «у вас нет разрешения».