React-Native Обновления ListView DataSource основы Родителя Реквизит

Question

Я работаю над приложением, которое имеет класс, который содержит следующее:

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

Когда класс обновляет свое состояние, он обновляет creature опор Details. Когда это произойдет, я хочу, чтобы детали использовали новую поддержку существа для обновления ListView с использованием CREATURES[this.props.creature].food в качестве нового DataSource.

Следующий код работает на начальном этапе, но я не могу понять, как заставить его обновить свой 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 
    }); 
}