当父组件状态记忆之前的选择,重新进入父组件所在界面那么更新之前选择的状态,但是组件并没有更新到这个状态。多次检查发现子组件没有随父组件的更新而更新。
子组件使用如下:
<Table
title={this.state.title}
data={this.state.tagsArr}
colse={true}
value={this.state.val}
onChange={(v)=> this.onChange(v)}
onOk={(v) => this._selectDj(v)}
>
</Table>
关键点在于 value={this.state.val},使用的是state值,不是props值,所以子组件没有随父子组件一起更新。
查阅资料:子组件显示父组件传来的props 做更新存在两种方法:
1、子组件直接使用props值
class Child extends React.component {
render() {
return <div>{this.props.val}</div>
}
}
2、在将 status 通过 componentWillReceiveProps 生命周期方法 更新
class Child extends React.component {
constructor(props) {
super(props);
this.state = {
val: props.val // 从父节点拿到的val值
};
}
componentWillReceiveProps(nextProps) {
// 在react v17版本里面,此方法可由 static getSnapshotBeforeUpdate(prevProps, prevState) 方法来替代
// 刷新子组件的val值, 谨慎使用,避免导致渲染死循环
this.setState({val: nextProps.val});
}
render() {
return <div>{this.state.val}</div>
}
}