javascript - 即使指定了索引，对象中的所有数组值也会在 this.setState 中更新

Question

我有一个动态选项表单。当选择表单类型时，它将根据数组索引更新特定的数组类型。例如: 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);
    })

}

Answer 1

在这一行const newMenu = [...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