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