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