React Native ListView - rowHasChanged không kích hoạt

Question

Tôi đang cố gắng triển khai một cuộn vô hạn trong React Native. Dưới đây là nguồn gốc của các thành phần:

var React = require('react-native'); 
var server = require('../server'); 
var Post = require('./Post'); 
var SwipeRefreshLayoutAndroid = require('./SwipeRefreshLayout'); 
var backEvent = null; 
var lastPostId = ""; 
var isLoadingMore = false; 
var isLoadingTop = false; 
var onEndReachedActive = false; 

var { 
    StyleSheet, 
    ListView, 
    View, 
    Text, 
    Image, 
    ProgressBarAndroid, 
    BackAndroid 
} = React; 

class Stream extends React.Component { 

constructor(props) { 
    super(props); 
    this.ds = new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => { 
      console.log("rowHasChenged FIRED!!"); 
      return false; 
     } 
    }); 

    this.state = { 
     dataSource: this.ds.cloneWithRows(['loader']), 
     hasStream: false, 
     posts: [] 
    }; 

} 

componentDidMount() { 

    BackAndroid.addEventListener('hardwareBackPress',() => { 
     this.props.navigator.jumpBack(); 
     return true; 
    }.bind(this)); 

    server.getStream('', '', 15).then((res) => { 

     lastPostId = res[res.length-1].m._id; 

     this.setState({ 
      posts: res, 
      hasStream: true, 
      dataSource: this.ds.cloneWithRows(res) 
     },() => onEndReachedActive = true); 
    }) 
} 

onRefresh() { 
    var posts = this.state.posts; 
    var firstPost = posts[0].m._id; 

    console.log(this.state.dataSource._rowHasChanged); 

    isLoadingTop = true; 

    server.getStream('', firstPost, 4000) 
     .then(res => { 
      console.log(posts.length); 
      posts = res.concat(posts); 
      console.log(posts.length); 
      this.setState({ 
       dataSource: this.ds.cloneWithRows(posts), 
       posts 
      },() => { 
       this.swipeRefreshLayout && this.swipeRefreshLayout.finishRefresh(); 
       isLoadingTop = false; 
      }); 
     }).catch((err) => { 
      isLoadingTop = false; 
     }) 

} 

onEndReached(event) { 

    if(!onEndReachedActive) return; 

    if(this.state.loadingMore || this.state.isLoadingTop)return; 
    isLoadingMore = true; 
    var posts = this.state.posts; 
    server.getStream(posts[posts.length-1].m._id, '', 15) 
     .then(res => { 
      console.log('received posts'); 
      posts = posts.concat(res); 
      lastPostId = posts[posts.length-1].m._id; 
      this.setState({ 
       dataSource: this.ds.cloneWithRows(posts), 
       posts 
      },()=>isLoadingMore = false); 
     }) 
} 

renderHeader() { 
    return (
     <View style={styles.header}> 
      <Text style={styles.headerText}>Header</Text> 
     </View> 
    ) 
} 

renderRow(post) { 

    if(post === 'loader') { 
     return (
      <ProgressBarAndroid 
       styleAttr="Large" 
       style={styles.spinnerBottom}/> 
     ) 
    } 

    let hasLoader = post.m._id === lastPostId; 

    let loader = hasLoader ? 
     <ProgressBarAndroid 
      styleAttr="Large" 
      style={styles.spinnerBottom}/> : null; 

    return (
     <View> 
      <Post 
       post={post}/> 
      {loader} 
     </View> 
    ) 
} 

render() { 


    return (
       <ListView 
        style={styles.mainContainer} 
        dataSource={this.state.dataSource} 
        renderRow={this.renderRow.bind(this)} 
        onEndReached={this.onEndReached.bind(this)} 
        onEndReachedThreshold={1} 
        pageSize={15} /> 
    ); 
} 
} 

Vấn đề là bất cứ khi nào tôi thêm (hoặc thêm vào trước) dữ liệu mới, phương pháp rowHasChanged của DataSource không cháy. Nó chỉ làm lại mọi hàng, thậm chí tho không có gì thay đổi (ngoại trừ dữ liệu mới). Bất kỳ ý tưởng nào tại sao phương thức bị bỏ qua?

Answer 1

Edit: Vượt qua một chức năng để setstate để tránh điều kiện chủng tộc

tôi chỉ figured it out. Nếu bạn gặp vấn đề tương tự, hãy kiểm tra điểm bạn thay đổi trạng thái của mình bằng số dataSource mới. Mine là như thế này:

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

Thay vào đó bạn nên luôn luôn sử dụng dataSource từ trạng thái trước đó, như thế này:

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

Cheers!

Answer 2

điều này phù hợp với tôi, hy vọng điều này sẽ hữu ích. Tôi đã tạo một nguồn dữ liệu mới và gán dữ liệu cập nhật cho nó về thay đổi trạng thái như sau: `

var dataSource = new ListView.DataSource(
    {rowHasChanged: (r1, r2) => (r1 !== r2)}); 

    this.setState({ dataSource : dataSource.cloneWithRows(posts) }); 

Bây giờ, dữ liệu mới được gán và chế độ xem được hiển thị chính xác. Lưu ý rằng mảng bài đăng được gán hiện giữ dữ liệu cập nhật. Vẫn tự hỏi dù đó là cách tốt nhất để làm điều đó nhưng nó hoạt động!

Answer 3

Tôi đồng ý rằng có vẻ như để hiểu rằng bạn nên luôn sử dụng dataSource từ trạng thái trước đó.

Tuy nhiên, khi tôi setstate cách này, rowHasChanged được gọi cho tất cả các hàng, tuy nhiên, rowHasChanged luôn trả sai và không có các hàng được trả lại ??? Tại sao?

// This is callback handler that the ListView DetailView will 
    // call when a ListView item is edited 
    onChange(waypoint: Object){ 
    console.log('Callback: rowNumber= ', waypoint.rowNumber); 
    console.log('  length(m)= ', waypoint.distance.meters); 

    var itemListChanged = this.state.itemList; 
    itemListChanged[waypoint.rowNumber-1] = waypoint; 
    this.setState({ 
      dataSource: this.state.dataSource.cloneWithRows(itemListChanged), 
    }); 
    }, 

Nếu tôi setstate cách này, renderRow được gọi là cho tất cả các hàng vô điều kiện mà không rowHasChanged bao giờ được gọi. Đó là chính xác?

this.setState({ 
    dataSource: ds.cloneWithRows(itemListChanged), 
}); 

Danh sáchXem, nguồn dữ liệu và phản ứng gốc là một đường cong học tập khó khăn đến từ C#/C/C++.

Answer 4

cho ai vẫn còn có vấn đề với rowHasChanged gọi nhưng vẫn trở về sai các đoạn sau đây có thể giúp

nguồn dữ liệu được khởi tạo như thông thường:

let ds = new ListView.DataSource ({ 

    rowHasChanged: (a, b) => { 
    const changed = (a !== b) 
    return changed 
    } 

}) 

this.data = [] 

this.state = { 
    listDataSource: ds.cloneWithRows(this.data) 
} 

đây là chức năng mà sẽ cập nhật một hàng

updateRow = (row, rowId, sectionId) => { 

    // make a shallow clone from the stored data array 
    let blob = this.data.concat() 

    // modify the row, since we are using the triple equal operator, we need to make sure we are giving it a new object (new ref) 
    blob[rowId] = Object.assign({}, blob[rowId], {label: blob[rowId].label + '..cape..deh'}) 

    // tell react to update the source 
    this.setState({ 
    listDataSource: this.state.listDataSource.cloneWithRows(blob) 
    },() => { 
    // we need to update our data storage here! after the state is changed 
    this.data = blob 
    }) 

}