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

标签 javascript reactjs redux spread

在下面的对象中,我想将 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]
}

最佳答案

从对象中获取数据。并像这样使用

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)

关于javascript - 返回使用扩展运算符修改了一些键的变异对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55678396/

相关文章:

javascript - 如何从ajax响应中获取请求的url?

javascript - 如何映射输入字段的动态数组

node.js - 创建 React App 未安装,显示错误并中止安装

javascript - react.js ReactComponent 不提供 setState()?

javascript - 类型 'undefined' 不能用作索引类型

reactjs - 输入字段失去对每种字符类型的关注 - react

firebase - 如何组合两个 Redux Firebase Cloud Firestore 查询?

javascript - 聚焦文本框时表单元素会波动

javascript - bcrypt 未使用 npm 安装(Mac OS X 10.9 - Node v0.10.22)

javascript - 有没有办法在不改变其位置的情况下更改对象数组中的项目?