react setState()方法的應用

若是不借助redux、mobx等狀態管理庫，當應用狀態改變時，react自己只能經過setState()方法刷新界面。

可是，setState({ key, value })的方式有時候寫起來會比較冗餘，好比當：

state={

        name : "",

        age : ""，

        address : ""，

        phone : ""

}

但願經過同一個方法傳參的形式來改變狀態值時，如下的方式並不會生效， 由於對象的key值不能是一個變量，不會讀取到傳入的key值。

onChange = (key, value) => {

        this.setState({

            key : value

        })

}

可是又不想寫switch case語句(由於代碼冗餘), 此時能夠經過如下方式來實現：

onChange = (key, value) => {

        this.setState({

　　　　[key] : value

　　}， () => {

　　　　// setState執行後的回調函數　　

　　})               

}

 

此方式在改變二級或多級對象屬性時也生效，如：

state = {

        data : {

            name : "tom"

        }

}

 

onChange = () => {

        this.state.data.name = "rose";

        this.setState({});

}