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