React Native：親の要素が変更された後、子ListViewは更新されません。

Question

ListViewが更新されないようです。

私はトグルスイッチ（<SegmentedControls />）を持つ親コンテナを持っています。ユーザーがそのトグルスイッチをクリックすると、子コンポーネント内のListViewが更新されたreservationListSelectedOption状態値を使用して更新したいと思います。

私には何が欠けていますか？

ここでコード：https://gist.github.com/chapeljuice/69483ab0bde13346de024d4e4a9753f0

Answer 1

実際に私は解決策を見つけました。thinhvo0108とMatt Aftのおかげで私はそこに行くのを手伝ってくれました。ここで

は、固定のdataSourceと組み合わせる私の改訂 componentWillReceiveProps機能が、正しくリストビューを更新しているされています https://gist.github.com/chapeljuice/69483ab0bde13346de024d4e4a9753f0

Answer 2

は、あなたの子コンポーネントへcomponentWillReceivePropsを追加してみてください。 （これはので、後で変更するべきではありませんnew ListView.DataSource({})：で

componentWillReceiveProps(nextProps) { 
    if (this.props.options !== nextProps.options) { 
     this.setState({ reservationListSelectedOption: nextProps.options[0] }); 
    } 
    } 

Answer 3

は実際に、何か間違ったことはあなたのdataSourceを設定する方法であります、あなたのコンストラクタでは、あなたが最初の時間のためにそれを設定します。それは次のようになりますdataSource: this.state.dataSource.cloneWithRows(reservationData.previous)

=>（ここでは、それは今のデータを持っていますので、それは、cloneWithRowsを持っている=>：これは、ただ一種ダミー事のあるデータがまだそれに渡されません）

にただし、後であなたがその状態をリセットつまり、this.state.dataSource「ダミーフレーム」自体が変更されたことを意味します編、および.cloneWithRowsの次の実行を失敗します - もう.cloneWithRows機能を持っていません）

======>SOLUTION：私の意見では

、あなたが行うことができます。

cardList.jsで

：

// Put the data-source ds here, which won't be changed 
var ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}); 

class CardList extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     reservationListStatus: this.props.reservationListStatus, 
     dataSource: ds.cloneWithRows(/* PUT YOUR INITIAL reservationData, OR JUST a blank array '[]' will be fine*/), 
    }; 
    } 

..and後に、あなただけのを使用する必要があります（常に変わらないdsを保つ）、このような何か：

getReservationData() { 
    if (this.props.reservationListStatus === "Previous Reservations") { 
     this.setState({ 
     dataSource: ds.cloneWithRows(reservationData.previous) 
     }) 
    } else { 
     this.setState({ 
     dataSource: ds.cloneWithRows(reservationData.current) 
     }) 
    } 
    console.log(this.state) 
    } 

あなたがすべき方法ですが、それはまだ動作しない場合は、ここであなたが遭遇するいくつかのエラーを投稿してください、ありがとう