函数式 React 开发

返回目录

函数式 React 开发

函数式 setState

参考 React 官方文档中的描述,setState 并不是立刻改变 this.state 的值,而是创建挂起的状态事务;如果直接在 setState 之后访问状态对象只会获得之前的值。譬如下述的代码就会存在某些错误或者预判差异:

updateState({target}) {
this.setState({user: {...this.state.user, [target.name]: target.value}});
doSomething(this.state.user) // Uh oh, setState merely schedules a state change, so this.state.user may still have old value
}

如果我们希望去在某个状态实际更新完毕之后,执行某些操作,那么可以以如下方式使用自定义的新状态:

updateState({target}) {
this.setState(prevState => {
const updatedUser = {...prevState.user, [target.name]: target.value}; // use previous value in state to build new state...
doSomething(updatedUser); // Now I can safely utilize the new state I've created to call other funcs...
return { user: updatedUser }; // And what I return here will be set as the new state
});
}

高阶函数