技術標籤：react native

貼下別人的文章，可個筆記。

今天在封裝一個滑動選擇元件遇到個怪事，父元件狀態記憶之前的選擇，重新進入父元件所在介面那麼更新之前選擇的狀態，但是元件並沒有更新到這個狀態。多次檢查發現子元件沒有隨父元件的更新而更新。
子元件使用如下：

<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
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。