Question

我正在尝试根据存储在钩子中的状态呈现三个不同的组件。

状态通过“onSubmit”函数发送，该函数接受响应，如果成功则将“提交”设置为真，或将“错误”设置为假。

但是，当我尝试进行条件渲染时，其中 'error === true' 或 'submitted === true'，然后是整个组件，如果两者都不适用，则它根本不显示该组件.

谁能指出我在这里做错了什么？

这是我的代码：

const WaitingListComponent = () => {

  const [email, setEmail] = useState('')
  const [submitted, setSubmitted] = useState(false)
  const [error, setError] = useState(false)

  const onSubmit = async (e) => {

    e.preventDefault()

    await axios.post("/api/waiting-list/addToList", {
      email: email
    })
      .then((response) => {
        setSubmitted(true)
      })
      .catch((err) => {
        setError(true)
      })
    }

    const errorComponent = () => {
      return (
        <form className="waiting-list-component-container" onSubmit={onSubmit}>
            <span className="waiting-list-success-span">
            <i className="fas fa-times-circle fa-3x waiting-list-error"></i>
            <p className="waiting-list-success-paragraph">Oops. Seems like there's been a problem. Please try again.</p>
            </span>
        </form>
      )
    }

    const successComponent = () => {
      return (
      <form className="waiting-list-component-container" onSubmit={onSubmit}>
          <span className="waiting-list-success-span">
          <i className="fas fa-check-circle fa-3x waiting-list-success"></i>
          <p className="waiting-list-success-paragraph">Thanks for signing up to our waiting list. A confirmation email is flying your way now.</p>
          </span>
      </form>
      )
    }

    const form = () => {
      return (
        <form className="waiting-list-component-container" onSubmit={onSubmit}>
          <h4 className="waiting-list-component-heading">Join our waiting list to get early access</h4>
          <p className="waiting-list-component-paragraph">Like the sound of us? Join our waiting list to get exclusive early access to our platform when we're ready to launch.</p>
          <input className="waiting-list-component-input" name="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="janedoe@email.com" />
          <GeneralButton type="submit" text="Get access" />
        </form>
      )
    }

  return (
    <>
      { error === true ? errorComponent : submitted === true ? successComponent : form }
    </>

  )
}

Answer 1

试试这个：

return (
    <>
      { error ? errorComponent() : submitted ? successComponent() : form() }
    </>

  )

Answer 2

试试这个怎么样？我觉得这种方式可能更直观一些。

if (error) return errorComponent();
if (submitted) return successComponent();
return form();

使用返回 null 的条件渲染基于钩子状态渲染不同的组件

2 个答案: