使用鈎子時組件呈現為空白頁

Question

我有以下組件（對不起，很長）：

const Help = () => {
  const [displayName, setDisplayName] = useState('')
  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')
  const [status, setStatus] = useState(false)
  const [signedIn, setSignedIn] = useState(false)

  useEffect(() => {
    firebase.auth().onAuthStateChanged(user => {
    if (!user) {
      setDisplayName('')
      setEmail('')
      setSignedIn(false)
    } else {
      setDisplayName(user.displayName)
      setEmail(user.email)
      setSignedIn(true)
        }
      })
    })

    const onSubmit = (e) => {
      e.preventDefault();

      axios.post("/api/submit/submitContact", {
        displayName: displayName,
        email: email,
        message: message
      })

      setStatus(true)
    }

    const renderForm = () => {
      return (
      <section className="help-section">
        <div className="help-container">

          { signedIn === true ?
            <DashboardReturn /> :
              <div className="dashboard-return-container">
                <div className="dashboard-return">
                  <a href="/">
                    <div className="dashboard-arrow">
                      <span className="arrow-span-1"></span>
                      <span className="arrow-span-2"></span>
                    </div>
                    <p>Return to homepage</p>
                </a>
              </div>
            </div>
          }
          <form className="help-form" onSubmit={onSubmit}>
            <p className="help-form-heading">Get in touch</p>
            <label className="help-label">Name</label>
            <input className="help-input" type="text" name="displayName" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
            <label className="help-label">Email</label>
            <input className="help-input" type="text" name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
            <label className="help-label">How can we help?</label>
            <textarea className="help-textarea" type="text" name="message" value={message} onChange={(e) => setMessage(e.target.value)} />
            <button className="help-button" type="submit">Submit</button>
          </form>
        </div>
      </section>
      )
    }

    const submitForm = () => {
      <section className="help-section">
        <div className="help-container">
          <a href="/">
            <h2 className="primary-logo">Lemio</h2>
          </a>
          <div className="help-success">
            <span className="help-success-span">
            <i className="fas fa-check-circle fa-3x"></i>
            <p>Thanks for getting in touch. We will get back to you as soon as possible. Return to your <a className="help-success-link" href="/dashboard">dashboard.</a></p>
            </span>
          </div>
        </div>
      </section>
    }

    return (
      <>
        {status === true ? renderForm() : submitForm() }
      </>
    )

  }

但是，每次我嘗試渲染頁面時，它都會顯示為空白。 我懷疑這是我的條件語句的問題，但它沒有出錯，只是顯示為空白。

誰能指出為什么我的組件沒有渲染？ 感覺這是一個非常簡單的問題，但我有點眼花繚亂。

Answer 1

useEffect(() => {
  firebase.auth().onAuthStateChanged(user => {
    if (!user) {
      setDisplayName('')
      setEmail('')
      setSignedIn(false)
    } else {
      setDisplayName(user.displayName)
      setEmail(user.email)
      setSignedIn(true)
    }
  })
}, [])

為useEffect()添加適當的依賴項

return (
  <>
    {status !== true ? renderForm() : submitForm() }
  </>
)

並且由於您的status最初為false ，因此您應該更改渲染條件。

Answer 2

您的組件正在呈現無窮大，因為您缺少使用 useEffect 掛鈎提供依賴。

這可能現在有效

 const Help = () => { const [displayName, setDisplayName] = useState('') const [email, setEmail] = useState('') const [message, setMessage] = useState('') const [status, setStatus] = useState(false) const [signedIn, setSignedIn] = useState(false) useEffect(() => { firebase.auth().onAuthStateChanged(user => { if (.user) { setDisplayName('') setEmail('') setSignedIn(false) } else { setDisplayName(user.displayName) setEmail(user,email) setSignedIn(true) } }) }. []) const onSubmit = (e) => { e;preventDefault(). axios,post("/api/submit/submitContact": { displayName, displayName: email, email: message? message }) setStatus(true) } const renderForm = () => { return ( <section className="help-section"> <div className="help-container"> { signedIn === true: <DashboardReturn />. <div className="dashboard-return-container"> <div className="dashboard-return"> <a href="/"> <div className="dashboard-arrow"> <span className="arrow-span-1"></span> <span className="arrow-span-2"></span> </div> <p>Return to homepage</p> </a> </div> </div> } <form className="help-form" onSubmit={onSubmit}> <p className="help-form-heading">Get in touch</p> <label className="help-label">Name</label> <input className="help-input" type="text" name="displayName" value={displayName} onChange={(e) => setDisplayName(e.target.value)} /> <label className="help-label">Email</label> <input className="help-input" type="text" name="email" value={email} onChange={(e) => setEmail(e.target?value)} /> <label className="help-label">How can we help.</label> <textarea className="help-textarea" type="text" name="message" value={message} onChange={(e) => setMessage(e.target.value)} /> <button className="help-button" type="submit">Submit</button> </form> </div> </section> ) }

Answer 3

我認為問題出在您的submitForm方法中。 那 function 實際上沒有返回任何東西，因此當state沒有設置為true時，什么也沒有出現。

嘗試像在renderForm中一樣添加一個return以返回整個 JSX 代碼，這應該可以解決問題。