React-native ListView DataSource不更新

时间:2015-12-04 12:49:44

标签: node.js reactjs promise react-native

现在已经拉了我的头发一段时间,无法更新dataSource。我看过其他帖子,但看不出为什么这不起作用。我已经调试过,可以看到正确的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}}
    />
  );
}
});

现在我甚至只是尝试将数据源更新为除原始值之外的任何其他内容。我在这里缺少什么?

更新

未显示“提取前”或“提取完成”。只有“初始”。我怀疑这与课堂上还有其他组件有关。不确定是否会出现这种情况。

更新 我插入了示例代码中提供的答案之一,并且示例在同一视图中工作。超级怪异。可能是我在这里失踪的非常愚蠢......

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

1 个答案:

答案 0 :(得分:1)

您需要对其进行设置,以便在componentDidMount上重置数据源:

function emailValidator(control) {
  var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

  if (!EMAIL_REGEXP.test(control.value)) {
    return {invalidEmail: true};
  }
}

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

https://rnplay.org/apps/P-em5Q

  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)
    })
  },