如何将FormData表单数据传递给React子组件Modal？

你当前只能获取最后一组键值对的原因是：在handleSubmit的循环中，每次调用setData都会覆盖之前的状态，且React的setState是异步批量更新操作，循环结束后只会保留最后一次的赋值结果。结合你的代码，有两种简洁的解决方案：

方案一：直接利用已有的values状态（推荐） #

你已经通过values状态维护了所有表单输入的值，完全不需要再通过FormData重新获取，直接将values传递给Modal即可：

修改ContactForm组件 #

1. 可以直接移除data状态，无需额外维护，直接将values作为props传给Modal：

// 移除以下状态定义
// const [data, setData] = useState({
//   key: '',
//   value: ''
// })

// 渲染Modal时直接传递values
<Modal 
  open={isOpen} 
  handleClose={handleClose} 
  data={values}
/>

2. 简化handleSubmit函数：

const handleSubmit = (e) => {
  e.preventDefault();
  // 直接使用已有的values状态，无需处理FormData
  setIsOpen(true);
}

修改Modal组件 #

根据data中的字段渲染对应输入框：

const Modal = ({ open, handleClose, data }) => {
  if(!open) return null

  return (
    <div className='wrapper'>
        <div className="modal">
            <div className="modal-content">
                <input disabled value={data.name} placeholder="Name" />
                <input disabled value={data.lastname} placeholder="Last Name" />
                <input disabled value={data.email} placeholder="Email" />
                <input disabled value={data.confirmEmail} placeholder="Confirm Email" />
                <input disabled value={data.message} placeholder="Message" />
                <button onClick={handleClose} >Close</button>
            </div>
        </div>
    </div>
  )
}

方案二：将FormData转换为完整对象后传递 #

如果一定要使用FormData获取表单数据，需要先将其转换为完整的JavaScript对象，再一次性更新状态：

修改ContactForm的handleSubmit函数 #

const handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData(e.currentTarget);
  // 将FormData转换为包含所有键值对的对象
  const formDataObj = Object.fromEntries(formData.entries());
  // 一次性设置完整数据到状态
  setData(formDataObj);
  setIsOpen(true);
}

此时data状态会包含所有表单字段，后续Modal的修改和方案一一致。

内容的提问来源于stack exchange，提问作者mateo ghidini