javascript - 返回带有使用扩展运算符修改的某些键的变异对象

Question

在下面的对象中，我想将 data[1] 的 val 的值增加 1，并且保持一切不变，我该如何实现呢？

const state = 
    {
        "data": [{
                "val": 1,
                "other": 10
            },
            {
                "val": 11,
                "other": 100
            },
            {
                "val": 100,
                "other": 1000
            }
        ]
    }

我希望变异的对象是这样的-

{
    "data": [{
            "val": 1,
            "other": 10
        },
        {
            "val": 10,
            "other": 100
        },
        {
            "val": 100,
            "other": 1000
        }
    ]
}

我知道我可以像这样直接更改值state.data[1].val = state.data[1].val+1，但是我想使用扩展运算符来实现相同的效果，是否可以使用扩展运算符来实现？像这样的东西-

const mutatedState = {
        ...state,
        data: [...state.data]
}

标签： javascriptreactjsreduxspread

Answer 1

从对象中取出data。并像这样使用

const state = { "data": [{ "val": 1, "other": 10 }, { "val": 11, "other": 100 }, { "val": 100, "other": 1000 } ] }
    
const {data} = state;         
let res = {
            ...state,
            data:[
                    data[0],
                    {...data[1],val:data[1].val+ 1},
                    ...data.slice(2)
                 ]
          }
 
console.log(result)