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

【问题标题】：Rendering different components based on hook state using conditional rendering returning null使用返回 null 的条件渲染基于钩子状态渲染不同的组件
【发布时间】：2020-12-22 08:03:33
【问题描述】：

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

状态通过“onSubmit”函数发送，该函数接受响应，如果成功则将“submitted”设置为 true，或者将“error”设置为 false。

但是，当我尝试进行条件渲染时，如果出现“错误 === true”或“已提交 === 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 }
    </>

  )
}

【问题讨论】：

标签： reactjs

【解决方案1】：

试试这个：

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

  )

【讨论】：

:) 在您的代码中，您使用errorComponent()、successComponent()、form() 作为可调用对象而不是直接调用，这就是您没有得到任何回报的原因。除此之外，还有很棒的代码。
谢谢！感谢您的帮助，祝您有美好的一天。

【解决方案2】：

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

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

【讨论】：