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