React:React Facebook登录调用两次Submit

Question

我正在使用react创建一个登录页面，它允许用户使用Facebook、谷歌或用户名和密码登录。我只是意识到，每次我使用Facebook登录时，都会调用onSubmit两次。只有Facebook身份验证导致此问题。因此，我的后端验证被调用，并返回一个res.json消息，该消息将在前端返回一个错误消息。如果用户决定使用Facebook登录，如何避免这种情况发生？在社交媒体登录方面，我使用的是react facebook登录和react google登录。

facebook按钮

const handleFacebookLogin = async (res) => {
dispatch(loginUser({ isFacebookId: res?.userID }));
};
<FacebookLogin
appId='code'
callback={handleFacebookLogin}
render={(renderProps) => (
<button
onClick={renderProps.onClick}
className='w-full font-sans text-xs flex items-center focus:outline-none'
>
<FontAwesomeIcon
icon={faFacebookF}
className='svg-size fill-current text-blue-600'
/>
<span className='w-full'>Sign In with Facebook</span>
</button>
)}
/>

后端导出const logiUser=async(req，res(=>{让{电子邮件，用户名，密码，isFacebookId，isGoogleId}=req.body；

try {
if (isFacebookId) {
const chkUser = await userModel.findOne({ isFacebookId: isFacebookId });
if (chkUser) {
if (!chkUser.isActive) {
return res.status(400).json({
msg: `The account is not yet activated.
n Please check your email for account activation link.`,
activation: true,
});
} else {
return res.status(200).json({
_id: chkUser._id,
email: chkUser.email,
username: chkUser.username,
name: chkUser.name,
isAdmin: chkUser.isAdmin,
msg: 'Login Success',
tokenId: createRefreshToken(chkUser._id),
});
}
} else {
return res.status(400).json({
msg: 'This Facebook account is not register yet. Please register using this ',
googleId: true,
});
}
} else if (isGoogleId) {
const chkUser = await userModel.findOne({ isGoogleId: isGoogleId });
if (chkUser) {
if (!chkUser.isActive) {
return res.status(400).json({
msg: `The account is not yet activated.
n Please check your email for account activation link.`,
activation: true,
});
} else {
return res.status(200).json({
_id: chkUser._id,
email: chkUser.email,
username: chkUser.username,
name: chkUser.name,
isAdmin: chkUser.isAdmin,
msg: 'Login Success',
tokenId: createRefreshToken(chkUser._id),
});
}
} else {
return res.status(400).json({
msg: 'This Google account is not register yet. Please register using this ',
googleId: true,
});
}
} else if (!username && !email) {
console.log('ta3');
return res.status(400).json({
msg: 'Please Provide a Username or Email',
username: true,
});
} else if (!password) {
return res.status(400).json({
msg: 'Please Provide a Password',
password: true,
});
} else {
if (username) {
const isEmail = (val) => {
var data =
/(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))/;
return data.test(val);
};
if (isEmail(username) === true) {
email = username;
}
let chkUsernameEmail = email
? { email: username }
: { username: username };
const chkUser = await userModel.findOne(chkUsernameEmail);
if (!chkUser) {
return res.status(400).json({
msg: 'Invalid Username or Email',
username: true,
});
} else {
if (!chkUser.isActive) {
return res.status(400).json({
msg: `The account is not yet activated.
n Please check your email for account activation link.`,
activation: true,
});
} else {
if (chkUser && (await chkUser.matchPassword(password))) {
res.json({
_id: chkUser._id,
email: chkUser.email,
username: chkUser.username,
name: chkUser.name,
isAdmin: chkUser.isAdmin,
msg: 'Login Success',
tokenId: createRefreshToken(chkUser._id),
});
} else {
return res.status(400).json({
msg: 'Invalid Password',
password: true,
});
}
}
}
}
}
} catch (error) {
res.status(500).json({ msg: error.message });
}

Answer 1

我认为在调用API时只需禁用UI上的按钮。