ReactJS：onSubmit 取決於 API 響應關閉模態框

Question

為什么 state 值在表單提交后沒有更新？ 因為我需要在成功登錄后關閉 model。

我試圖檢查這個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);

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 )