node.js - React-native ListView 数据源不更新

Question

我已经烦恼了一段时间了，无法更新数据源。我看过其他帖子，但不明白为什么这不起作用。我已经调试并可以看到返回了正确的 json，因此数据就在那里。

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

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

更新

不显示“获取之前”或“获取完成”。只是“最初”。我怀疑这与类中还有其他组件有关。不确定情况是否如此。

更新我插入了提供的答案之一的示例代码，并且该示例在同一 View 中工作。 super 奇怪。可能我在这里缺少一些非常愚蠢的东西......

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