React-native ListView数据源未更新

Question

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

var ReviewList = React.createClass({
  _getMovieReviews: function() {
    var _urlForReview = this.props.config.api_url + 'movies/' + 
    this.props.movie.id + '/reviews.json?apikey=' + this.props.config.api_key;
            this.setState(function(){
          dataSource: ds.cloneWithRows(['before fetch']);  
        });
    fetch(_urlForReview)
      .then(function(res) {
        return res.json();
      }).then(function (json){
        console.log(json);
        this.setState(function(){
          dataSource: ds.cloneWithRows(['fetch done']);  
        });
    });
  }, 
  getInitialState: function() {
    return {
      dataSource: ds.cloneWithRows(['initial'])
    };
  },
  componentDidMount: function() {
      this._getMovieReviews();
  },

render: function() {
  return (
     {rowData}}
    />
  );
}
});

update问题似乎在于从fetch语句中更新数据源。

Answer 1

您需要设置它，以便在ComponentDidMount上重置数据源：

  getInitialState: function() {
    return {
      dataSource: ds.cloneWithRows([])
    };
  },

  componentDidMount: function() {
        this._getMovieReviews()  
  },

  _getMovieReviews: function() {
    // Go to api and get movies, then...
    this.setState({
        dataSource: ds.cloneWithRows(movieReviewsFromApi)
    })
  },

如果这回答了你的问题，请告诉我。我在这里建立了一个完整的工作项目。代码也在下面。

https://rnplay.org/apps/p-em5q

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
} = React;

var movieReviewsFromApi = [
  {name: 'Die Hard', review: 'Best movie ever'}, {name: 'Home Alone 2', review: 'Great movie'}, {name: 'Bourne Identity', review: 'Awesome Movie'}
  ]

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

var SampleApp = React.createClass({

  getInitialState: function() {
    return {
      dataSource: ds.cloneWithRows([])
    };
  },

  componentDidMount: function() {
        this._getMovieReviews()  
  },

  _getMovieReviews: function() {
    this.setState({
        dataSource: ds.cloneWithRows(movieReviewsFromApi)
    })
  },

  _renderRow: function(rowData) {
    return (<View style={{height:70,borderBottomColor: '#ededed', borderBottomWidth:1, paddingLeft:10, paddingTop:10}}>
                <Text style={{fontSize:22}}>{rowData.name}</Text>
              <Text style={{color: '#666'}}>{rowData.review}</Text>
            </View> )
  },

  render: function() {
    return (
    <View style={{ marginTop:60 }}>
        <ListView
      dataSource={this.state.dataSource}
      renderRow={this._renderRow}
    />
    </View>
  );
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);