React-native ListView DataSource 未更新

Question

现在一直在拉我的头发，无法更新数据源。我看过其他帖子，但不明白为什么这不起作用。我已经调试过了，可以看到返回了正确的 json，所以数据就在那里。

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); var ReviewList = React.createClass({ _getMovieReviews：函数（）{ var _urlForReview = this.props.config.api_url + 'movies/' + this.props.movi​​e.id + '/reviews.json?apikey=' + this.props.config.api_key; this.setState(函数(){ 数据源：ds.cloneWithRows(['before fetch']); }); 获取（_urlForReview） .then（函数（res）{ 返回 res.json(); }).then(函数 (json){ 控制台.log(json); this.setState(函数(){ 数据源：ds.cloneWithRows(['fetch done']); }); }); }, 获取初始状态：函数（）{ 返回 { 数据源：ds.cloneWithRows(['initial']) }; }, 组件DidMount：函数（）{ this._getMovieReviews(); }, 渲染：函数（）{ 返回 （ {行数据}} /> ); } });

现在我什至只是尝试将数据源更新为原始值以外的任何其他值。我在这里错过了什么？

更新

“获取之前”或“获取完成”均未显示。只有“初始”。我怀疑这与类中还有其他组件有关。不知道是不是这样。

更新 我插入了提供的答案之一的示例代码，并且示例在同一视图中工作。超级诡异。可能我在这里错过了一些非常愚蠢的东西......

更新 似乎问题在于从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)
    })
  },

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

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