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({});

}