反应：对Facebook登录呼叫Submit进行两次反应？

Question

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

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

后端导出常量loginUser=async（req， res）=

  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上的按钮。