首次调用onSubmit时FormData返回空，第二次正常的解决方案

问题根源 #

React的useState状态更新是异步的。你在submitHandler里创建完formDatas后立刻调用setSendData(formDatas)，但此时sendData并不会马上变成新的FormData，紧接着的console.log(sendData)拿到的还是更新前的旧值（初始是空字符串）。第二次提交时，sendData才会更新成第一次创建的FormData，所以看起来第二次才有数据，但这其实是滞后的旧数据。

解决方案 #

方案1：直接使用创建好的FormData（推荐）

既然要提交数据，根本不需要把FormData存到state里，直接用刚创建的formDatas做后续操作就行：

const submitHandler = (e) => {
    e.preventDefault()
    const formDatas = new FormData()
    formDatas.append('name', name)
    formDatas.append('occupation', occupation)
    formDatas.append('bio', paragraph)
    formDatas.append('join', date)
    formDatas.append('image', img)
    
    // 直接用formDatas打印或发请求
    console.log(formDatas)
    axios
    .post(api + '/members', formDatas)
    .then(res => console.log(res))
    .catch(err => console.log(err))
}

方案2：监听state变化再操作（如果确实需要存state）

如果一定要把FormData存在state里，就用useEffect监听sendData的变化，在状态更新后再执行打印或请求：

import { useEffect } from 'react'

// ... 其他代码不变

const submitHandler = (e) => {
    e.preventDefault()
    const formDatas = new FormData()
    formDatas.append('name', name)
    formDatas.append('occupation', occupation)
    formDatas.append('bio', paragraph)
    formDatas.append('join', date)
    formDatas.append('image', img)
    setSendData(formDatas)
}

// 监听sendData变化
useEffect(() => {
    if (sendData instanceof FormData) {
        console.log(sendData)
        axios
        .post(api + '/members', sendData)
        .then(res => console.log(res))
        .catch(err => console.log(err))
    }
}, [sendData])

额外优化建议 #

你现在用多个state管理表单字段，可以改成用一个state对象来管理，代码会更简洁：

const [formData, setFormData] = useState({
    name: '',
    occupation: '',
    paragraph: '',
    date: ''
})

const handleInputChange = ({target:{name, value}}) => {
    setFormData(prev => ({...prev, [name]: value}))
}

// 然后在input上设置name属性，比如：
// <input name="name" value={formData.name} onChange={handleInputChange} />

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