首页 文章

React-native ListView DataSource不更新

提问于
浏览
0

我已经把头发拉了一段时间,无法让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}}
    />
  );
}
});

现在我甚至只是尝试将数据源更新为原始值以外的任何其他值 . 我在这里想念的是什么?

update

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

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

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

1 回答

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

    如果这回答了你的问题,请告诉我 . 我已经 Build 了一个完整的工作项目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);
    

相关问题