React中向State数组添加对象失效问题排查

问题描述 #

定义了两个State变量：

const [boxes, setBoxes] = useState([]);
const [showAddGalley,setShowAddGalley]=useState({galleyNo:""});

有一个接收表单输入的提交函数，期望每次提交时将表单生成的对象加入boxes数组，当前提交函数：

const onSubmitGalleyBoxes=(e,updated)=>{
    if(updated){
        setBoxes((prev)=>{return {...prev,`${showAddGalley.galleyNo}`:{updated}}})
    }
}

期望提交后boxes数组格式：

const boxes=[{id: "Galley10", galleyNo: "440S", galleyItem: "Veg Meals"},
    {id: "Galley11", galleyNo: "340S", galleyItem: "Non Veg Meals"}
] 

提交时的updated对象结构：

const updated={galleyNo: "340S", galleyItem: "Non Veg Meals"}

当前setBoxes写法未生效，求问题原因及解决办法。

问题原因 #

1. 错误将数组当作对象修改：prev是数组类型，用{...prev}会把数组转换为以索引为键的对象，再添加${showAddGalley.galleyNo}作为键，完全破坏了期望的数组结构，导致boxes变成对象而非数组。
2. 缺少id字段处理：期望的数组元素需要包含id字段，但现有代码没有生成或添加该字段。
3. 闭包导致状态值过时：直接引用showAddGalley.galleyNo可能因闭包问题拿到旧值，且updated中已包含galleyNo，无需额外从showAddGalley获取。

解决代码 #

修改提交函数为以下写法：

const onSubmitGalleyBoxes=(e, updated)=>{
    if(updated){
        setBoxes(prev => [
            ...prev, // 保留之前的所有数组元素
            {
                id: `Galley${prev.length + 10}`, // 根据当前数组长度生成唯一id，可按需调整规则
                ...updated // 展开updated中的galleyNo和galleyItem字段
            }
        ]);
    }
}

说明 #

• 使用数组展开运算符...prev保留原有数组元素，再追加新对象，符合期望的数组结构。
• 通过...updated合并表单输入字段，同时添加id字段满足格式要求。
• 采用函数式更新确保获取最新的boxes状态，避免闭包带来的旧值问题。

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