javascript - ReactJS：onSubmit 取决于 API 响应关闭模式框

Question

为什么表单提交后状态值没有更新？因为我需要在成功登录后关闭模型。

我试图检查这个useCallback钩子，但无法关闭对话框。

function HeaderComponent(props) {

  const [loggedIn, setIsLoggedIn] = useState(false);
  const [show, setShow] = useState(false);
  const [modelShow, setmodelShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const registerUser = async event => {
    event.preventDefault()

    axios.post(`{api_url}/user/login`, data, { 
    })
    .then((response) => {
      localStorage.setItem("token", userDetails.auth_token);
      setmodelShow(true)
      router.push('/')
    })
    .catch((error)) => {
      setmodelShow(false)
    }
  }

  return (
  <Modal show={show} onHide={handleClose} className={show ? 'intro' : ''}>
    <form onSubmit={registerUser}>
      <input type="email" />
      <div className="form-group">
        { 
          modelShow ? <input type="submit" name="" value="Login" onClick={handleClose}/>
          : <input type="submit" name="" value="Login" />
        }
      </div>
    </form>
  </Model>
  )
}

export default React.memo(HeaderComponent);

标签： javascriptreactjsreact-hooks

Answer 1

您的代码需要进行一些修改，例如

return ( !modelShow ? <Modal show={show} onHide={handleClose} className={show ? 'intro' : ''}>
    <form onSubmit={registerUser}>
      <input type="email" />
      <div className="form-group">
        { 
          modelShow ? <input type="submit" name="" value="Login" onClick={handleClose}/>
          : <input type="submit" name="" value="Login" />
        }
      </div>
    </form>
  </Model> : null )