React提交数据到getForms.io后无法弹出Modal组件求助

问题根源 #

直接在handleServerResponse函数中写<Modal/>不会触发组件渲染——React组件必须在组件的渲染输出中返回，或者通过状态变量控制是否渲染，而非在普通函数调用中直接写JSX。

修复步骤 #

1. 添加状态变量控制Modal的显示/隐藏
2. 在handleServerResponse中更新状态，触发Modal显示
3. 在组件的渲染部分添加Modal的条件渲染

修改后的完整代码 #

import axios from 'axios'
import { React, useState } from 'react'
import { useForm } from 'react-hook-form'
import Modal from '../../Modal'

export default function ContactForm(){
  const [serverState, setServerState] = useState({ submitting: false, status: null })
  // 新增状态：控制Modal显示
  const [showModal, setShowModal] = useState(false)

  const handleServerResponse = (ok, msg, form) => {
    setServerState({ submitting: false, status: { ok, msg } })
    // 设置Modal显示
    setShowModal(true)
  }

  const { register, handleSubmit, formState: { errors } } = useForm()
  const onSubmit = (data,e) =>{
    const formData = new FormData()

    for(var field in data){
      formData.append(field, data[field])
    }

    setServerState({submitting:true})

    axios({
      method:'post',
      url:'https://getform.io/f/79e16760-4dbb-4e67-b212-c98e3f1b8eda',
      data: formData
    })
    .then((r) => {
      e.target.reset();
      handleServerResponse(true, "Form Submitted", e)
    })
    .catch((r) => {
      handleServerResponse(false, r.response?.data?.error || "提交失败，请重试", e);
    })
  }
  
  return(
     <section>
        <form 
          onSubmit={handleSubmit(onSubmit)}
          className='mt-5 gap-4 text-black flex flex-col'
        >
          <input className='pl-2 rounded-sm focus:outline-none' type='text' placeholder='Enter yourName' {...register("fullname")}/>
          <input className='pl-2 rounded-sm focus:outline-none' type='email' placeholder='Enter your Email' {...register("email")}/>
          <textarea className='pl-2 pt-2 rounded-sm focus:outline-none' rows={10} placeholder='Enter your Message' {...register('emailMessage')}/>
          <input className=' text-white drop-shadow-lg rounded-lg bg-tertiary p-2 mx-auto' type='submit' disabled={serverState.submitting}/>
        </form>
        {/* 条件渲染Modal，传递状态和消息 */}
        {showModal && (
          <Modal 
            isOpen={showModal}
            onClose={() => setShowModal(false)}
            message={serverState.status?.msg}
            isSuccess={serverState.status?.ok}
          />
        )}
     </section>
  )
}

额外优化点 #

• 给提交按钮添加disabled属性，避免重复提交
• 在catch中添加可选链和默认错误消息，防止r.response为undefined时报错
• 将弹窗的状态、消息、关闭逻辑通过props传递给Modal组件（需确保你的Modal组件支持这些props，比如接收isOpen控制显示、onClose处理关闭事件、message显示提示文本等）

内容的提问来源于stack exchange，提问作者Evan Feliza