React函数组件表单未正确设置state状态变量问题求助

问题原因 #

你在handleChange中更新表单状态时没有保留原有状态的属性，每次更新都会用仅包含当前输入字段的新对象替换整个formData，导致除了最后一次输入的字段外，其余字段全部丢失，所以提交时打印serviceName会返回undefined。同时你在handleChange中调用的event.preventDefault()是多余的，输入框的change事件不需要阻止默认行为。

修复代码 #

仅需要修改handleChange方法即可：

const handleChange = (event) => {
    // 传入函数更新状态，先展开原有所有状态属性，再覆盖当前修改的字段
    setFormData(prevFormData => ({
        ...prevFormData,
        [event.target.name]: event.target.value
    }))
};

可选优化 #

你在axios请求中使用模板字符串包裹属性是多余操作，可直接引用原值：

const res = await axios.post("/outage-new", {
    user_id: formData.userReport,
    service_type: formData.serviceType,
    service_name: formData.serviceName,
    outage_street: formData.serviceStreet,
    outage_city: formData.serviceCity,
    outage_state: formData.serviceState,
    outage_description: formData.serviceDescription,
})

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