Reakcja-rodzimy listview niektóre wiersze nie wyświetlają się

Question

Mam modalny z 3 zakładkami. Każda karta ma widok listy, każdy zbiór danych większy niż 10 wierszy nie działa poprawnie. Co się dzieje, gdy ładowanie początkowe jest wyświetlane poprawnie. jednak gdy wyświetla się więcej wierszy, wszystkie są puste. Nie jestem pewien co się dzieje. Używanie najnowszego React-Native. Oto kilka zrzutów ekranu, jeśli to pomaga.

<View style={{flex:1, height: this.state.visibleHeight - 100, width: this.state.visibleWidth }}> 
    { 
     (this.state.isSubdivisions) ? <Subdivisions model={this.props.model.subdivisions}/> 
     : (this.state.isProspects) ? <LandProspects model={this.props.model.landProspects}/> 
     : (this.state.isFavorites) ? <Favorites model={this.props.model.favorites}/> 
     : null} 
</View> 

Tab

class ListLandProspects extends Component { 
    constructor(props) { 
    super(props); 
    const foo = this.props.model.slice(0,10) 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) 
    this.state = { 
     dataSource: ds.cloneWithRows(foo), 
     deviceHeight: Dimensions.get('window').height, 
     deviceWidth: Dimensions.get('window').width 
    } 
    } 

    componentDidUpdate(prevProps) { 
    if (this.props.model != prevProps.model) 
    this._updateLandProspects() 
    } 

    _updateLandProspects(){ 
    const clone = this.props.model.slice() 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(clone) 
    }) 
    } 

    render() { 
    return (
     <Row> 
     <Col> 
      <List> 
      <ListView 
       style={{ height: this.state.visibleHeight - 100, width: this.state.visibleWidth }} 
       enableEmptySections={true} 
       initialListSize={10} 
       pageSize={10} 
       dataSource={this.state.dataSource} 
       renderRow={this._renderRow.bind(this)} /> 
      </List> 
     </Col> 
     </Row> 
    ) 
    } 

    _renderRow(rowData) { 
    return (
     <ListItem style={styles.listItem}> 
     <View style={styles.rowWrapper}> 
      <Row> 
      <Col> 
       <Text style={styles.labelMain}>{rowData.fullAddress}</Text> 
      </Col> 
      </Row> 
      <Row style={styles.toolbarRow}> 
      <View style={styles.toolbarDetail}> 
       <TouchableOpacity> 
       <Icon 
        name='ios-information-circle' 
        style={{color: colors.blue}}/> 
       </TouchableOpacity> 
      </View> 
      <View style={styles.toolbarMarker}> 
       <TouchableOpacity> 
       <Icon 
        name='ios-pin' 
        style={{color: colors.green}}/> 
       </TouchableOpacity> 
      </View> 
      <View style={styles.toolbarFavorite}> 
       <TouchableOpacity> 
       <Icon 
        name={rowData.isFavorite ? 'ios-star' : 'ios-star-outline'} 
        style={{color: colors.orange}}/> 
       </TouchableOpacity> 
      </View> 
      </Row> 
     </View> 
     </ListItem> 
    ) 
    } 
} 


ListLandProspects.propTypes = { 
    model: React.PropTypes.array 
} 

export default connect(null, null)(ListLandProspects) 

Style

const styles = StyleSheet.create({ 
    label: { 
    color: '#000', 
    fontWeight: 'bold' 
    }, 
    labelMain: { 
    color: '#000', 
    fontWeight: 'bold', 
    fontSize: 15 
    }, 
    rowWrapper: { 
    padding: 5, 
    paddingLeft: 10, 
    paddingRight: 10 
    }, 
    listItem: { 
    padding: 0, 
    marginLeft: 0, 
    paddingLeft: 0, 
    borderBottomWidth: 0, 
    borderColor: 'transparent' 
    }, 
    toolbarRow: { 
    height: 38, 
    marginTop: 5, 
    backgroundColor: '#f2f2f2' 
    }, 
    toolbarFavorite: { 
    position: 'absolute', 
    margin: 5, 
    left: 110 
    }, 
    toolbarMarker: { 
    position: 'absolute', 
    margin: 5, 
    left: 60 
    }, 
    toolbarDetail: { 
    position: 'absolute', 
    margin: 5 

    } 
}) 

Answer 1

dowolny zestaw danych większych niż 10 wierszy nie działa prawidłowo

Prawie na pewno związane z tej linii:

const foo = this.props.model.slice(0,10) 

EDIT:

Myślę, że componentDidUpdate jest wadliwa. this.props.model != prevProps.model zawsze będzie true, ponieważ nie można porównać takich tablic. Tak więc _updateLandProspects będzie wywoływane przy każdej aktualizacji, która ponownie ustawi twój stan, a ponieważ masz initialListSize z 10 prawdopodobnie nigdy nie zobaczysz więcej niż tej liczby, ponieważ spowoduje to kolejne renderowanie w kółko.

Spróbuj zmienić initialListSize na większą liczbę i usuń powyższy kod slice(0, 10) i sprawdź, czy zachowuje się tak samo jak teraz, ale z większą liczbą. Powinno to pokazać, czy problem dotyczy wady componentDidUpdate, czy też nie.