Update Listview, die Zeile und Abschnitt enthält

Question

Ich habe 2 Komponenten, die CalendarList und CalendarListItem sind. Ich verwende Listview, um beim ersten Laden 10 Datensätze in CalendarListItem anzuzeigen, und fügt weitere 10 Datensätze hinzu, wenn der Benutzer nach unten scrollt.

Ich begegne Schwierigkeiten, wenn Sie versuchen, Listview zu aktualisieren, das Zeile und Abschnitt enthält, um die nächsten 10 Datensätze anzufügen, wenn Benutzer bis zum Ende der Liste scrollen. Ich habe Hinweise gesucht und angewendet, aber die meisten Fragen, die sich auf Zeilen beziehen, funktionieren nur für mich nicht.

Hier ist mein Code:

constructor(props) { 
     super(props); 
     this.ds = new ListView.DataSource({ 
        rowHasChanged: (r1, r2) => r1 !== r2, 
        sectionHeaderHasChanged: (s1, s2) => s1 !== s2, 
       }); 
     this.state = { 
       eventData: [], 
       eventDatas: [], 
       dataBlob: {}, 
       dataSource: {}, 
       dataBlog: [], 
       refreshing: false, 
       page: 1 
     }; 
    } 

    componentWillMount() { 
      this.loadEventData(); 
    } 
    componentDidMount() { 
     this.loadEventData(); 
    } 

loadEventData() { 
    eventState = this.props.eventtop; 


    console.log('NEW DATA', eventState); 

     const tempDataBlob = this.state.dataBlob; 

      this.state.eventData = this.props.eventtop; 

      this.state.eventData.forEach(item => { 
       const event = item; 
       const date = new Date(item.EventDate); 
       const group = dateFormat(date, 'mmmm yyyy'); 
       if (currentGroup !== group) { 
        currentGroup = group; 
        currentIndex++; 
        this.state.eventDatas.push({ divider: currentGroup, data: [] });  
       } 
       this.state.eventDatas[currentIndex].data.push(event); 
       tempDataBlob[this.state.eventDatas[currentIndex].divider] = this.state.eventDatas[currentIndex].data; 
       this.setState({ 
        dataBlob: tempDataBlob 
       }); 
      }); 

     this.setState({ 
      dataSource: this.ds.cloneWithRowsAndSections(this.state.dataBlob) 
     }); 
     console.log('FUCKING DATA', this.state.dataBlob); 
    } 


renderRow(rowData) { 
     return (    
        <TouchableOpacity 
        onPress={() => { 
         if (window.width <= 600) { 
          Actions.calendarDetail({ eventtop: rowData }); 
         } else if (window.width > 600) {  
           this.props.getEventd(rowData); 
           this.passState.bind(this.props.eventItems); 
         } 
          }} 
        > 
         <View> 
          <Text style={styles.evenType}> 
           {rowData.EventType} 
          </Text> 
          <Text style={{ ...styles.contentStyle, ...styles.contenStyle2 }}> 
           {dateFormat(rowData.EventDate, 'mm/dd/yyyy')} 
          </Text> 
          <Icon 
           name='chevron-thin-right' 
           style={styles.iconStyle} 
          /> 
          <View 
           style={styles.titleStyle} 
          > 
           <Text style={styles.contentStyle}> 
           {rowData.Title} 
          </Text> 
          </View>       
         </View>     
        </TouchableOpacity>  
     ); 
} 
renderSectionHeader(sectionData, sectionId) { 
    return (
     <View> 
      <Text style={styles.timeStyle}> 
         {sectionId} 
      </Text> 
     </View> 
    ); 
} 

    render() { 
     return (
       <ListView 
        style={{ flex: 1 }} 
        enableEmptySections 
        dataSource={this.state.dataSource} 
        renderRow={data => this.renderRow(data)} 
        renderSectionHeader={this.renderSectionHeader} 
        onEndReached={this.props.onEndReached} 
        renderFooter={this.props.renderFooter} 
        onEndReachedThreshold={30} 
       /> 


     ); 
    } 

Answer 1

ich eine Lösung gestern gefunden. Eigentlich muss ich einen anderen Action Creator erstellen und ihn in CalendarListItem platzieren, diese Aktion gibt den Status zurück, der neue Daten ist, dann gebe ich alte Daten mit diesen neuen Daten zurück. Erledigt!