表单handleSubmit函数报Cannot read properties of undefined (reading 'value')问题

核心问题拆解 #

1. 直接绑定handleSubmit时的误报错误
   报错Cannot read properties of undefined (reading 'value')但数据能正常保存，本质是React合成事件被池化回收导致的。React会复用事件对象，当你在await fetchSetupDetails()这类异步操作后再访问event.target，事件对象已经被React回收，event.target变为undefined，但此时数据请求已经发起，所以MongoDB能收到数据，属于异步操作后的误报。

2. 箭头函数调用时数据无法保存
   使用<form onsubmit={()=>handleSubmit()}>时，没有传递事件参数event，导致handleSubmit里的event是undefined，执行event.preventDefault()直接报错，且无法获取表单数据，最终请求失败，错误快速闪现是因为catch捕获了错误但未做页面停留处理。

具体修复方案 #

1. 修复箭头函数调用的问题

如果一定要用箭头函数，必须传递事件参数，否则直接使用函数绑定更规范：

// 正确写法二选一：
<form className="centered-form" onSubmit={handleSubmit}>
// 或
<form className="centered-form" onSubmit={(e) => handleSubmit(e)}>

2. 解决异步操作后的事件回收问题

在异步操作之前提前取出所有表单数据或保存表单元素引用，避免依赖后续的event.target：

async function handleSubmit(event) {
    event.preventDefault();
    // 提前保存表单元素引用，避免异步后事件被回收
    const form = event.target;
    
    // 先取出所有需要的表单数据，再执行异步操作
    const setupName = form.elements.setupName.value;
    const ipElements = form.querySelectorAll('.ip');
    const typeElements = form.querySelectorAll('[id^="type-"]');
    const setupIPs = Array.from(ipElements).map((ipElement, index) => ({
        ip: ipElement.value,
        type: typeElements[index].value
    }));
    const setupLocation = form.elements.setup_location.value;
    const setupOwner = form.elements.setup_owner.value;

    // 执行异步操作
    await fetchSetupDetails();

    // 后续逻辑使用提前取出的数据，不再访问event.target
    const modifiedTeamName = `${rat}-${teamName}`;
    const data = {
        setupName,
        setupIPs,
        // 其他字段
    };

    try {
        const response = await axios.put(`http://${configData.ip}:${configData.port}/detail`, data);
        const pod_response = await axios.post(`http://${configData.ip}:${configData.port}/pod_detail`, formData);
        form.reset();
        navigate('/');
    } catch (error) {
        console.error(error);
    }
};

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