我有一個 url 來確認我的用戶的帳戶，在 url 中有一個令牌，在您進入頁面后，它應該向您列印一條訊息“用戶現在處于活動狀態”或“令牌無效”。在 localhost 中它運行完美，但現在在 netlify 中它呈現網站，但它確實顯示任何訊息，或者向服務器發出任何請求。此外，它在服務器和前端控制臺上都沒有給我任何型別的錯誤。
這是網站鏈接：https ://cozy-melomakarona-5853fa.netlify.app/confirm-account/1g52cb94j2rke4pdlgl
我唯一的懷疑是 useEffect 鉤子在 netlify 中不起作用。
import React, { useEffect, useState } from 'react'
import {useParams, Link} from "react-router-dom"
import Alert from '../components/Alert.jsx';
function Confirm() {
const params = useParams();
const {token} = params;
const url = `${import.meta.env.VITE_BACKEND_URL}/api/veterinaries/confirm-account/${token}`;
const [alert, setAlert] = useState({});
const [confirmedAccount, setConfirmedAccount] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
const confirmAccount = async ()=> {
try {
const response = await fetch(url);
const result = await response.json();
if (!response.ok){ //here we check if there is an error from the backend and we generate a new error with the message from backend
throw new Error(result.msg);
}
//if everything is ok then
setConfirmedAccount(true)
setAlert({msg: result.msg, error1: false})
} catch (error) {
setAlert({msg: error.message, error1: true}) //here we show the backend error on the frontend
}
//stop loading
setLoading(false);
}
return () => {
confirmAccount();
}
}, [])
const {msg} = alert;
return (
<>
<div>
<h1 className="text-indigo-600 font-black text-5xl text-center capitalize mr-6">
Verify your account and <span className="text-black">manage your patients</span></h1>
</div>
<div className="shadow-lg rounded-xl bg-white px-5 py-10">
{/* if it is not loading then show alert*/}
{!loading ? <Alert alert={alert}/> : null }
{/* if the account is confirmed then show sign in link*/}
{confirmedAccount && <Link to="/" className="text-blue-600 block text-lg text-center mt-4">Sign in!</Link>}
</div>
</>
)
}
export default Confirm
uj5u.com熱心網友回復：
您使用的方式useEffect不是預期的，return宣告是不必要的，而是您需要呼叫您的函式confirmAccount，這應該可以解決問題：
const confirmAccount = async () => {
try {
const response = await fetch(url);
const result = await response.json();
if (!response.ok) {
//here we check if there is an error from the backend and we generate a new error with the message from backend
throw new Error(result.msg);
}
//if everything is ok then
setConfirmedAccount(true);
setAlert({ msg: result.msg, error1: false });
} catch (error) {
setAlert({ msg: error.message, error1: true }); //here we show the backend error on the frontend
}
//stop loading
setLoading(false);
};
useEffect(() => {
confirmAccount();
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/487766.html
標籤：javascript 反应 网络化
上一篇：多個css類有什么作用？