关于react父组件更新,子组件无更新现象分析

今天在封装一个滑动选择组件遇到个怪事,父组件状态记忆之前的选择,重新进入父组件所在界面那么更新之前选择的状态,但是组件并没有更新到这个状态。多次检查发现子组件没有随父组件的更新而更新。
子组件使用如下:

 this.onChange(v)}
    onOk={(v) => this._selectDj(v)}
>

关键点在于 value={this.state.valueArr},使用的是state值,不是props值,所以子组件没有随父子组件一起更新。

查阅资料:子组件显示父组件传来的props 做更新存在两种方法:

1、子组件直接使用props值

class Child extends Component {
    render() {
        return 
{this.props.someThings}
} }

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 
{this.state.someThings}
} }

你可能感兴趣的:(关于react父组件更新,子组件无更新现象分析)