前言
日常积累,欢迎指正
正文
错误代码段及错误描述
constructor(props: IProps) {
super(props)
this.state = {
mode: this.props.mode ? this.props.mode : 'middle'
}
}
static getDerivedStateFromProps(nextProps, prevState) {
let derivedStates
if (nextProps.mode !== prevState.mode) {
derivedStates = {
mode: nextProps.mode
}
}
return derivedStates
}
changeMode =() => {
this.setState({
mode : 'min'
})
}
错误描述:
在使用 react 新声明周期做开发时发现我可以通过外部传递的 props.mode 来修改 UI 但是在组件内部执行 this.setState() 方法时却不能达到预期的效果??
解决办法
需要一个hack来辅助:绑定props到state上
static getDerivedStateFromProps(nextProps, prevState) {
const { mode } = nextProps
const {props} = prevState
if (mode !== props.mode) {
return {
mode,
props : {
mode
}
}
}
return null
}
原因描述
这与新生命周期的特性相关,现在比较忙没有时间做赘述,以后有时间做补充
或者可以直接查看weixin_34007886 的原创文章 - 拥抱react新生命周期–getDerivedStateFromProps