React修改state(非redux)中数组和对象里边的某一个属性的值

在使用React时，会经常需要处理state里边设置的初始值以达到我们的实际需求，比如从接口获取到列表数据后要赋值给定义的列表初始值，然后数据驱动view视图进而呈现在我们眼前，这种最简单的赋值方式实现起来也很简单，如下：

this.setSate({
    listData: res.data
})

其实VUE实现起来更简单，直接写成this.listData = res.data即可，这里不做过多vue的赘述。

那么在使用React时你有没有想过如果是给一个数组中的某一项重新赋值呢？如果给一个Object对象中的某一项单独重新赋值呢？还会这么简单吗？往下看。

this.state = {
    listData: [
        {name: "小坏", age: "20"},
        {name: "小不", age: "21"},
    ],
    obj: {
        name: "小坏",
        age: "22",
    }
}

类似这种的，如果我只想修改listData数组第二项中的name值呢？如果我只想修改obj中的age值呢？最开始的那种赋值方法已经不能用了，否则会报错的。比如：

this.setSate({
    listData[1].name: "陈小坏",
    obj.age: 21
})

这种写法连编译都不能通过，更不用说将代码跑起来了，看图说话：

那么究竟该如何实现呢？

首先this.setSate({})赋值时，其中的key不接受类似listData[1].name的格式，只能是类似name或其他我可能还不知道的的格式，其次其中的value值也是要获取到相对应的key才能正确赋值。

具体实现代码：

change = (index) => {
    const listData = [...this.state.listData];   //复制数组--浅拷贝
    const obj = Object.assign({}, this.state.obj, { age: "21" });

    this.setState({
        listData: listData.map((item, idx) => idx === index ? {...item, name:  "陈小坏"} : item),
        obj: obj,
    })
}

这才是这种特殊赋值方法的正确打开方式。

其中Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象并返回目标对象。如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

而{...item, name: "陈小坏"}中的三个点（...）是扩展运算符，它用于取出参数对象中的所有可遍历属性并拷贝到当前对象之中，在这里的作用就是将listData中的item展开，然后将name: "陈小坏"合并到对应的item中，相当于Object.assign({}, item, { name: "陈小坏" , age: 21})。

还是再说一句VUE吧，VUE在这里实现起来就很简单，具体实现方式就不再赘述！

本文参考：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

https://www.jianshu.com/p/2b0929b66785

https://blog.csdn.net/qq_29819449/article/details/80435435