如果不借助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({});
}