Javascript 即使指定了索引，对象中的所有数组值也已在此.setState中更新

我有一个动态选项表单。当选择表单类型时，它将根据数组索引更新特定的数组类型。e、 g:

this.state.menuInput=[{“title”：“array 1”，“type”：“}，{“title”：“array 2”，“type”：“}]

。当我更改数组2值的表单类型时，该类型应该更新为所选的任何类型

它的格式应该是

[{“title”：“array 1”，“type”：“}，{“title”：“array 2”，“type”：“radio_button”}]

。当前，当我改变状态时，两个数组中的“类型”都在更新

这样：

[{“title”：“array 1”，“type”：“radio_button”}，{“title”：“array 2”，“type”：“radio_button”}]

。即使我在

setstate

中专门硬编码了数组索引

如何根据索引改变数组值

 menuTypeOption(index, menuType){

    this.setState(prevState => {
        const newMenu = [...prevState.menuInput];
        newMenu[index]['title'] = menuType;
        return {menuInput: newMenu};
    } , function(){
        console.log(this.state.menuInput);
    })

}

---

在这一行中，

constnewmenu=[…prevState.menuInput]不制作数组的深度副本，只创建指向相同对象的新数组

所以
newMenu[index]['title']=menuType改变原始对象

您可以使用更改的属性创建新对象，而不是进行变异：

newMenu[index] = {...newMenu[index], title: menuType};


若在原始数组中已经有两个指向同一对象的指针，那个么这个解决方案也可以工作，因为它创建了新对象，并且不会改变共享对象

可以这样证明：

const obj = {foo: 'bar'};
let arr = [obj, obj]; // same object used twice
// now if we do `obj.foo = 'new value';`, it'll change both values in array
arr = [...arr];
arr[1] = {...arr[1], foo: 'new value'};
// now we have two different objects in arr: one points to old, and one points to new copy with changed values

两个索引中可能都有相同对象的引用。另外，
newMenu
只是数组的浅拷贝。因此，
newMenu[index]['title']=menuType
会改变状态。@adiga，你好，即使它是同一个对象引用，但提供索引只会改变正确的数组对象？
let obj={title:1}；设arr=[]；方位推力（obj）；方位推力（obj）现在
arr
在两个索引中具有相同的对象。如果更新
arr[0].title=2
，则会更新
title
两个索引，因为它们都指向同一个对象memory@adiga是的。我现在明白了。谢谢。这仍然不能解释为什么两个索引的
标题
都会更新为
单选按钮
@adiga你说得对。然而，解决方案仍然适用于这种情况。最新答案