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