React如何更新嵌套在对象数组中的状态数组？

你当前的代码存在两个核心问题：

1. 对象字面量中不能使用active[option]=true这种赋值语法，不符合JS对象的写法规范
2. 遍历数组后未调用setParts更新状态，且未匹配的分支没有返回原对象，会导致数组出现undefined项

以下是修正后的完整代码：

const handleOnClick = (bodyPart) => {            
    setParts(prevParts => prevParts.map(part => {
        // 不匹配的部分直接返回原对象，避免不必要的复制
        if (part.bodyPart !== bodyPart) return part;
        
        // 匹配到目标项时，先复制原active数组，再修改指定索引
        const newActive = [...part.active];
        newActive[option] = true;
        
        // 返回新的part对象，保持状态不可变性
        return {
            ...part,
            active: newActive
        };
    }));
}

关键细节说明： #

• 使用函数式更新（prevParts => ...）：确保基于最新的状态进行修改，避免因useState异步更新导致的状态不一致问题
• 复制原active数组：直接修改原数组会违反React状态的不可变性原则，必须创建新数组后再修改目标索引的值
• 未匹配项直接返回原对象：减少不必要的对象复制，提升性能

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