为什么我需要按两次才能提交表格？答案

【问题标题】：Why I need to press twice times to submit my form?为什么我需要按两次才能提交表格？
【发布时间】：2021-04-17 23:57:49
【问题描述】：

我想提交我的登录表单，但我需要按两次才能完成登录表单，我不知道会发生什么。我正在使用样式化的组件，这个按钮表单是一个 input 标签我也在使用 firebase-hooks 我只想点击一次提交

这是我的代码

export default function LoginForm() {
  // submit
  const handleLogin = (e) => {
    e.preventDefault();
    signInWithEmailAndPassword(email, password);

    if (user) {
      setTimeout(() => {
        history.push(`${ROUTES.HOME}`);
      }, 1000);
    }
  };

  if (loading) {
    return <Loading />;
  }

  return (
    <FormContainer onSubmit={(e) => handleLogin(e)}>
      <LogoContainer>
        <img
          src="https://firebasestorage.googleapis.com/v0/b/auth-c068d.appspot.com/o/instagram%2Finstagram-signup.png?alt=media&token=cdafffb1-3034-474d-be96-d507b5e416c6"
          alt="instagram-logo"
        />
      </LogoContainer>

      <input
        id="email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <input
        id="password"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      <ButtonForm type="submit" name="btn-login" value="Log In" />
      <p>
        Don't have an account? <Link to="/signup">Sign Up</Link>
      </p>
      {error && <Error errorMessage={error.message} />}
    </FormContainer>
  );
}

【问题讨论】：

如果您将 console.log 放在 handleLogin 的顶部，它会在第一次提交后打印吗？如果是这样，它可能与 preventDefault 之后该函数中的代码有关

标签： javascript reactjs firebase forms

【解决方案1】：

看来您需要在此处使用 useEffect 挂钩。您的 handleLogin 函数仅在每次点击时运行一次。第一次提交时，用户未按预期定义。当您第二次单击它时它会起作用，因为用户是真实的。

尝试从 handleLogin 函数中删除它。

if (user) {
  setTimeout(() => {
    history.push(`${ROUTES.HOME}`);
  }, 1000);
}

然后添加一个 useEffect 钩子。

useEffect(() => {     
if (user) {
  setTimeout(() => {
    history.push(`${ROUTES.HOME}`);
  }, 1000);
}}, [user])

此效果将在组件挂载时运行，和在每次更改您的 user 状态后运行。（这是假设您使用用户的反应状态，因为我看不到 user 来自哪里）

【讨论】：

【解决方案2】：

将按钮类型从 type="submit" 更改为 type="button" 并使用 onCkick={() => clickHandler()} 处理点击

【讨论】：