React-Native根據父項更新ListView數據源

Question

我正在開發一個包含以下內容的類的應用程序：

<Details creature={this.state.creature} />

當類更新其狀態時，它將更新Details的creature道具。 發生這種情況時，我希望Details使用新的生物道具使用CREATURES[this.props.creature].food作為新的DataSource刷新ListView。

以下代碼最初可以工作，但我不知道如何獲取它來更新其dataSource：

var Details = React.createClass({
  getInitialState: function(){
    var ds = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
    var cr = CREATURES[this.props.creature];
    var rows = cr.food;
    ds = ds.cloneWithRows(rows);
        return {
        dataSource:ds,
    };
    },
  renderRow: function(rowData){  
    return (
      <View>
         <Text>{rowData}</Text>
      </View>
    );
  },
  render: function(){
    return (
            <ListView
                    ref="listview"
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                    automaticallyAdjustContentInsets={false}
                    keyboardDismissMode="on-drag"
                    keyboardShouldPersistTaps={true}
                    showsVerticalScrollIndicator={true}/>
    );
    }
});

另外，我是新手，所以我可能會以完全錯誤的方式這樣做。

Answer 1

您將使用componentWillReceiveProps，它傳遞更新道具並使用列表視圖的更新數據源更新狀態。

像（未經測試的）：

componentWillReceiveProps: function(nextProps) {
    var cr = CREATURES[nextProps.creature];
    var rows = cr.food;
    var ds = this.state.datasource.cloneWithRows(rows);
    this.setState({
        ...this.state,
        dataSource: ds
    });
}