React state存储表单输入对象时单输入识别异常问题排查

两个核心逻辑错误导致表单字段更新异常：

• HandleForm组件中inputObj的初始值设置错误：该状态设计为存储{fName: "", uName: ""}结构的表单对象，但初始值传入了空字符串""，首次渲染访问inputObj.fName/inputObj.uName时会直接得到undefined。
• AddGamerData组件的输入变更逻辑错误：handleChange里调用setInputObj({[event.target.name] : event.target.value})时，会用仅包含当前输入字段的新对象完全覆盖旧状态，不会保留另一个输入框的已填值，切换输入框时另一个字段的值会直接丢失变成undefined。

1. 修正HandleForm中inputObj的初始值，和后续重置的结构保持一致，初始化为包含两个字段的空对象：

// 错误原写法 const [inputObj, setInputObj] = useState("");
const [inputObj, setInputObj] = useState({fName: "", uName: ""});

2. 修正AddGamerData中的状态更新逻辑，更新时先展开旧状态的所有字段，再覆盖当前修改的字段，保证其他输入项的值不丢失：

const handleChange = (event) => {
    const {name, value} = event.target;
    // 先拷贝旧对象的所有属性，再更新当前输入项对应的值
    setInputObj(prev => ({...prev, [name]: value}))
}

优化说明：用函数式更新写法可以避免连续快速输入时，闭包拿到旧状态值导致的更新丢失问题，适配复杂表单场景。

HandleForm组件 #

import {useState} from 'react';
import AddGamerData from './AddGamerData';
import ListGamerData from './ListGamerData';

const HandleForm = () => {
const [uNameArray, setUNameArray] = useState([]);
const [profileArray, setProfileArray] = useState([]);
// 修正初始值为匹配表单结构的对象
const [inputObj, setInputObj] = useState({fName: "", uName: ""});

const checkUser = (event) => {
    event.preventDefault();
    if (!uNameArray.includes(inputObj.uName)) {
        setUNameArray([...uNameArray, inputObj.uName]);
        setProfileArray([...profileArray, inputObj]);
        setInputObj({fName: "", uName: ""});
    } else {
        alert("Gamer Tag already exists. Please try again.");
    }
}

const addUser = (event) => {
    checkUser(event);
};

return (
    <div className="handle-form-component">
        <h1>Gamer Data</h1>
        <p><strong>Enter gamer data below:</strong></p>
        <form onSubmit={addUser}>
            <AddGamerData inputObj={inputObj} setInputObj={setInputObj} />
        </form>
    <ListGamerData uNameArray={uNameArray} profileArray={profileArray} />
    </div>   
)}
export default HandleForm;

AddGamerData组件 #

const AddGamerData = ({inputObj, setInputObj}) => {
const inputIsEmpty = () => inputObj.uName === "";

const handleChange = (event) => {
    const {name, value} = event.target;
    // 展开旧状态保留其他字段，再更新当前字段
    setInputObj(prev => ({...prev, [name]: value}))
}

return (
    <div className="add-gamer-data-component">
        <input
            type="text"
            name="fName"
            placeholder="Enter First Name"
            value={inputObj.fName}
            onChange={handleChange}
        /><br></br>
        <input
            type="text"
            name="uName"
            placeholder="Enter Gamer Tag"
            value={inputObj.uName}
            onChange={handleChange}
        /><br></br>
        <button disabled={inputIsEmpty()} >Add Gamer</button>
    </div>
)}
export default AddGamerData;

修改完成后两个输入框的内容都会正常存入inputObj对象，提交时可以拿到完整的fName和uName值，不会再出现字段为undefined的问题。

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