react-native – React Native ListView – rowHasChanged不会触发

前端之家收集整理的这篇文章主要介绍了react-native – React Native ListView – rowHasChanged不会触发前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在React Native中实现无限滚动.以下是组件的来源:
  1. var React = require('react-native');
  2. var server = require('../server');
  3. var Post = require('./Post');
  4. var SwipeRefreshLayoutAndroid = require('./SwipeRefreshLayout');
  5. var backEvent = null;
  6. var lastPostId = "";
  7. var isLoadingMore = false;
  8. var isLoadingTop = false;
  9. var onEndReachedActive = false;
  10.  
  11. var {
  12. StyleSheet,ListView,View,Text,Image,ProgressBarAndroid,BackAndroid
  13. } = React;
  14.  
  15. class Stream extends React.Component {
  16.  
  17. constructor(props) {
  18. super(props);
  19. this.ds = new ListView.DataSource({
  20. rowHasChanged: (row1,row2) => {
  21. console.log("rowHasChenged FIRED!!");
  22. return false;
  23. }
  24. });
  25.  
  26. this.state = {
  27. dataSource: this.ds.cloneWithRows(['loader']),hasStream: false,posts: []
  28. };
  29.  
  30. }
  31.  
  32. componentDidMount() {
  33.  
  34. BackAndroid.addEventListener('hardwareBackPress',() => {
  35. this.props.navigator.jumpBack();
  36. return true;
  37. }.bind(this));
  38.  
  39. server.getStream('','',15).then((res) => {
  40.  
  41. lastPostId = res[res.length-1].m._id;
  42.  
  43. this.setState({
  44. posts: res,hasStream: true,dataSource: this.ds.cloneWithRows(res)
  45. },() => onEndReachedActive = true);
  46. })
  47. }
  48.  
  49. onRefresh() {
  50. var posts = this.state.posts;
  51. var firstPost = posts[0].m._id;
  52.  
  53. console.log(this.state.dataSource._rowHasChanged);
  54.  
  55. isLoadingTop = true;
  56.  
  57. server.getStream('',firstPost,4000)
  58. .then(res => {
  59. console.log(posts.length);
  60. posts = res.concat(posts);
  61. console.log(posts.length);
  62. this.setState({
  63. dataSource: this.ds.cloneWithRows(posts),posts
  64. },() => {
  65. this.swipeRefreshLayout && this.swipeRefreshLayout.finishRefresh();
  66. isLoadingTop = false;
  67. });
  68. }).catch((err) => {
  69. isLoadingTop = false;
  70. })
  71.  
  72. }
  73.  
  74. onEndReached(event) {
  75.  
  76. if(!onEndReachedActive) return;
  77.  
  78. if(this.state.loadingMore || this.state.isLoadingTop)return;
  79. isLoadingMore = true;
  80. var posts = this.state.posts;
  81. server.getStream(posts[posts.length-1].m._id,15)
  82. .then(res => {
  83. console.log('received posts');
  84. posts = posts.concat(res);
  85. lastPostId = posts[posts.length-1].m._id;
  86. this.setState({
  87. dataSource: this.ds.cloneWithRows(posts),posts
  88. },()=>isLoadingMore = false);
  89. })
  90. }
  91.  
  92. renderHeader() {
  93. return (
  94. <View style={styles.header}>
  95. <Text style={styles.headerText}>Header</Text>
  96. </View>
  97. )
  98. }
  99.  
  100. renderRow(post) {
  101.  
  102. if(post === 'loader') {
  103. return (
  104. <ProgressBarAndroid
  105. styleAttr="Large"
  106. style={styles.spinnerBottom}/>
  107. )
  108. }
  109.  
  110. let hasLoader = post.m._id === lastPostId;
  111.  
  112. let loader = hasLoader ?
  113. <ProgressBarAndroid
  114. styleAttr="Large"
  115. style={styles.spinnerBottom}/> : null;
  116.  
  117. return (
  118. <View>
  119. <Post
  120. post={post}/>
  121. {loader}
  122. </View>
  123. )
  124. }
  125.  
  126. render() {
  127.  
  128.  
  129. return (
  130. <ListView
  131. style={styles.mainContainer}
  132. dataSource={this.state.dataSource}
  133. renderRow={this.renderRow.bind(this)}
  134. onEndReached={this.onEndReached.bind(this)}
  135. onEndReachedThreshold={1}
  136. pageSize={15} />
  137. );
  138. }
  139. }

问题是每当我追加(或前置)新数据时,DataSource的rowHasChanged方法都不会触发.它只是重新渲染每一行,即使没有任何变化(新数据除外).
知道为什么绕过这个方法吗?

编辑:将函数传递给setState以避免竞争条件

我刚想通了.如果遇到相同的问题,请检查使用新dataSource更改状态的位置.我是这样的:

  1. this.setState({
  2. dataSource: this.ds.cloneWithRows(posts)
  3. });

相反,您应该始终使用之前状态的dataSource,如下所示:

  1. this.setState(state => ({
  2. dataSource: state.dataSource.cloneWithRows(posts)
  3. }))

干杯!

猜你在找的React相关文章