React useState旧状态未保存：无法将对象存入数组

核心问题分析 #

1. restForm初始状态设为undefined，第一次调用setRestForm({...restForm, ...})时，展开undefined会直接报错，导致状态无法正确存储表单数据。
2. handleSubmit仅临时创建newData，但未更新formCompra的items状态，页面状态不会同步，下次提交时items仍为旧数组。
3. 提交后未重置restForm，会导致新输入数据叠加在旧对象上，造成数据混乱。
4. 第一个表单处理函数存在拼写错误：handleChage → 应为handleChange，不修正会导致文本输入失效。

修正后的代码 #

import { useState } from 'react';

// 组件内部代码
const [formCompra, setFormCompra] = useState({
    name: '',
    lastName: '',
    items: []
});

// 初始设为空对象，避免展开undefined报错
const [restForm, setRestForm] = useState({});

// 修正拼写错误：handleChage → handleChange
const handleChange = (e) => {
    const { name, value } = e.target;
    setFormCompra({
        ...formCompra,
        [name]: value
    });
};

const handleChangeArray = (e) => {
    const { name, value } = e.target;
    setRestForm({
        ...restForm,
        [name]: value
    });
};

const handleSubmit = (e) => {
    // 阻止表单默认提交行为（适配<form>标签场景）
    e.preventDefault();

    // 过滤空对象，避免无效数据进入数组
    if (Object.keys(restForm).length === 0) return;

    // 用函数式更新确保获取最新状态，追加新对象到items数组
    setFormCompra(prevState => ({
        ...prevState,
        items: [...prevState.items, restForm]
    }));

    // 重置restForm，准备下一次输入
    setRestForm({});

    // 此处可添加提交到后端的逻辑
    // console.log('提交数据:', formCompra);
};

额外优化建议 #

• 若使用<form>标签，务必将handleSubmit绑定到onSubmit属性，并调用e.preventDefault()避免页面刷新。
• 可给restForm的表单字段添加校验逻辑，确保存入数组的是完整有效的对象。
• 依赖前一次状态更新时，优先使用函数式更新（如setFormCompra(prevState => {...})），避免闭包导致的状态不一致问题。

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