React-native学习-31---关于react父组件更新，子组件无更新现象

最新推荐文章于 2023-10-17 15:20:56 发布

hopetomorrow

最新推荐文章于 2023-10-17 15:20:56 发布

阅读量1.2k

点赞数

文章标签： react native

原文链接：https://www.jianshu.com/p/d62bbb598360

版权

本文探讨了如何修复子组件Picker在父组件状态改变时未能同步更新的问题，重点在于理解为何使用state而非props，并介绍了两种更新子组件的方法：直接使用props和通过componentWillReceiveProps生命周期管理。

摘要由CSDN通过智能技术生成

贴下别人的文章，可个笔记。

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

<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>
      }
    }

作者：白小纯kl
链接：https://www.jianshu.com/p/d62bbb598360
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。