ReactFunctionComponentForm沒有設定狀態變數？

我有一個 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;

uj5u.com熱心網友回復：

使用useState鉤子時，更新不會像在類組件的this.setState. 您正在使用僅更新最后一個欄位值的新物件替換狀態。

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

您必須自己手動管理。使用功能狀態更新來訪問前一個狀態并將其淺復制到下一個狀態物件中。

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

標籤：javascript 反应 公理 反应钩子 jsx

上一篇：為什么我的物件不斷獲得NaN值？

下一篇：來自功能組件的條件渲染