在用户仍在登录时设置加载不起作用

Question

它确实让用户登录，但在加载时，我想显示一条它仍在加载的消息。这就是我所做的，但没有用。

const [isLoading, setIsLoading] = useState(false);    
const handleSubmit = async (e) => {
        e.preventDefault();
        const auth = getAuth();
        console.log(email, password, "1");
        signInWithEmailAndPassword(auth, email, password)
          .then((userCredential) => {
            // Signed in
    
            const user = userCredential.user;
            setIsLoading(true);
           console.log("signed in")
            // ...
          })
          .catch((error) => {
            alert(error);
          });
      };

加载和提交按钮：

 {isLoading ? (
              <>
                {" "}
          
                  <Button disabled>
                    Loading..
                  </ButtonForm>
              </>
            ) : (
              <>
                  <Buttontype="submit">Submit</Button>
              </>
            )}

Answer 1

如果您编写代码，您将在用户登录时将 loading 设置为 true。这与您试图完成的相反。您想要的是用户通过查看加载响应并在用户身份验证结束时将其删除来获得按钮按下的即时反馈。

在发生错误的情况下创建模式并在正在进行的 API 调用期间禁用按钮也是更好的做法。

export default App = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();

    // Immediate feedback
    setIsLoading(true);

    const auth = getAuth();
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in
        setIsLoading(false);
      })
      .catch((error) => {
        // Not signed in
        setIsLoading(false);
        setError(true);
      });
  };

  return (
    <div>
      <button type="button" onClick={handleSubmit} disable={isLoading}>
        Click
      </button>
      {isLoading && <div>Loading ...</div>}
      {error && <div>An error has occured!</div>}
    </div>
  );
};

在用户仍在登录时设置加载不起作用

Setting up a loading while user is still being signed in not working

firebase

reactjs

firebase-authentication

material-ui