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.state[key] = value;    //仅改变状态的值， 但不会刷新界面

        this.setState({})               //通过调用setState({})刷新界面，必须传一个对象

}

 

此方式在改变二级或多级对象属性时也生效，如：

state = {

        data : {

            name : "tom"

        }

}

 

onChange = () => {

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

        this.setState({});

}