在使用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() 方法用於將所有可枚舉屬性的值從一個或多個源對象復制到目標對象並返回目標對象。如果多個源對象在復制到目標對象時有重復的key，那麽後邊的key值會覆蓋掉前邊的key值。而{...item, "name": "陳小壞"}中的三個點（...）是擴展運算符，它用於取出參數對象中的所有可遍歷屬性並拷貝到當前對象之中，在這裏的作用就是將listData中的item展開，然後將 "name": "陳小壞"合並到對應的item中，就這麽回事。

還是再說一句VUE吧，VUE在這裏實現起來就很簡單，具體實現方式就不再贅述！

本文參考：
https://www.jianshu.com/p/2b0929b66785
https://blog.csdn.net/qq_29819449/article/details/80435435

React修改state(非redux)中數組和對象裏邊的某一個屬性的值