React Function Component Form没有设置状态变量？

Question

我有一个 React 函数组件，它是一种用户输入值的表单。用户输入使用 Hooks 存储。我遇到的问题是它似乎没有正确设置钩子。当我在 axios 调用之前控制台记录一个值时，它返回为未定义。以下是我到目前为止的代码。我认为我非常接近，但不确定我在哪里犯了错误。任何帮助表示赞赏！

import React, { useState, useEffect } from "react";
import axios from "axios";

function ReportOutage(){
    //Use state hook to hold the values users input, passed into axios call
    //setting the default values
    const [formData, setFormData] = useState({
        userReport: '6',
        serviceType: "",
        serviceName: "",
        serviceStreet: "",
        serviceCity: "",
        serviceState: "",
        serviceDescription: ""
    }) 

    const handleChange = (event) => {
        event.preventDefault();
        setFormData({[event.target.name]: event.target.value})
    };

    const handleSubmitReport = async (event) =>{
        event.preventDefault();
        console.log(formData.serviceName); // This is returning undefined when I am expecting the service name entered by the user.
        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}`,
        })
    };

    return (
        <>
            <h1 id="Report-Title" class>Test Dialog box</h1>
            <form onSubmit={handleSubmitReport}>
                <input type="text" placeholder="Service Type" 
                onChange={handleChange}
                value={formData.serviceType}
                name="serviceType"/>

                <input type="text" placeholder="Service Name"
                onChange={handleChange} 
                value={formData.serviceName}
                name="serviceName"/>

                <input type="text" placeholder="Street"
                onChange={handleChange} 
                value={formData.serviceStreet}
                name="serviceStreet"/>

                <input type="text" placeholder="City"
                onChange={handleChange} 
                value={formData.serviceCity}
                name="serviceCity"/>

                <input type="text" placeholder="State"
                onChange={handleChange} 
                value={formData.serviceState}
                name="serviceState"/>

                <input type="text" placeholder="Description"
                onChange={handleChange} 
                value={formData.serviceDescription}
                name="serviceDescription"/>

                <button type="submit">Report Outage</button>
            </form>
        </>
    );
}

export default ReportOutage;

Answer 1

当使用useState 挂钩时，更新不会像在类组件的this.setState 中那样进行浅层合并。您正在用一个新对象替换状态，仅更新了最后一个字段值。

const handleChange = (event) => {
  event.preventDefault();
  setFormData({ // <-- new object with only field name/value
    [event.target.name]: event.target.value
  });
};

您必须自己手动管理。使用functional state update 访问并将前一个状态浅拷贝到下一个状态对象中。

const handleChange = (event) => {
  event.preventDefault();
  const { name, value } = event.target;
  setFormData(data => ({
    ...data,
    [name]: value,
  }));
};