React-Native 根据 Parent Props 更新 ListView 数据源

Question

我正在开发一个应用程序，该应用程序的类包含以下内容：

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

当类更新其状态时，它会更新Details 的creature 属性。发生这种情况时，我希望 Details 使用新的生物道具来刷新 ListView，并使用 CREATURES[this.props.creature].food 作为新的 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
    });
}