今天在封装一个滑动选择组件遇到个怪事,父组件状态记忆之前的选择,重新进入父组件所在界面那么更新之前选择的状态,但是组件并没有更新到这个状态。多次检查发现子组件没有随父组件的更新而更新。
子组件使用如下:
<Picker
title={this.state.title}
data={this.state.datalist}
cols={1}
value={this.state.valueArr}
onChange={(v)=> this.onChange(v)}
onOk={(v) => this._selectDj(v)}
>
关键点在于 value={this.state.valueArr},使用的是state值,不是props值,所以子组件没有随父子组件一起更新。
查阅资料:子组件显示父组件传来的props 做更新存在两种方法:
1、子组件直接使用props值
class Child extends Component {
render() {
return <div>{this.props.someThings}</div>
}
}
2、在将 status 通过 componentWillReceiveProps 生命周期方法 更新
class Child extends Component {
constructor(props) {
super(props);
this.state = {
someThings: props.someThings
};
}
componentWillReceiveProps(nextProps) {
this.setState({someThings: nextProps.someThings});
}
render() {
return <div>{this.state.someThings}</div>
}
}