Реагировать Native ListView не обновляет, когда очищается DataSource

Question

I обновления состояния компонента, как

if (!this.state.filtered) { 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(allData), 
     filtered: false, 
    }); 
} else { 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(filteredData), 
     filtered: true, 
    }); 
} 

это отлично работает, когда filteredData не пусто. но когда filteredData является пустым массивом, ListView не обновляется после setState (функция renderRow() и rowHasChanged() не вызывается также.).
Я пробовал звонить listView.forceUpdate(), но бесполезно. моей реакции родной версии 0.14.0 и работает на Android 5,0

=== обновление ===
После вызова setState(), используя console.log(this.state.dataSource) результатов является

{ 
    _rowHasChanged: [Function], 
    _getRowData: [Function: defaultGetRowData], 
    _sectionHeaderHasChanged: [Function], 
    _getSectionHeaderData: [Function: defaultGetSectionHeaderData], 
    _dataBlob: { s1: [] }, 
    _dirtyRows: [ [] ], 
    _dirtySections: [ true ], 
    _cachedRowCount: 0, 
    rowIdentities: [ [] ], 
    sectionIdentities: [ 's1' ] 
} 

В моем случае, структура переменная allData как это:

var allData = [[{id:1, name:'tom'},{id:2, name:'jerry'}], [...], [...]]; 

и filteredData просто пустой массив var filteredData = [];
я изменил filteredData к var filteredData = [[null]] и ListView может быть оказана правильно, не знаю почему, он просто работает :(

Answer 1

Трудно точно сказать, потому что я не вижу, начальное состояние вашего источника данных (this.state .dataSource) в своем коде, но я думаю, что проблема может быть, что вам нужно иметь DataSource настроить так:

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

чем, установка вызова состояния, как это:

this.setState({ 
    filtered: true, 
    dataSource: ds.cloneWithRows(filtereddata) 
}); 

Я создать полную работу g проект here. Кроме того, код вставлен ниже. Надеюсь, это поможет.

https://rnplay.org/apps/iPfYoQ 

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
    ListView 
} = React; 

var alldata = [{name: 'chris'}, {name: 'jennifer'}, {name: 'james' }]; 
var filtereddata = [] 

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

var SampleApp = React.createClass({ 

    getInitialState: function(){ 
    return { 
     filtered: false, 
     dataSource: ds.cloneWithRows(alldata) 
    }; 
    }, 

    onPress: function() { 
    if (!this.state.filtered) { 
     this.setState({ 
      filtered: true, 
      dataSource: ds.cloneWithRows(filtereddata) 
     }); 
    } else { 
     this.setState({ 
      filtered: false, 
      dataSource: ds.cloneWithRows(alldata) 
     }); 
    } 
    }, 

    _renderRow: function(rowData) { 
    return (
     <View> 
      <Text style={styles.text}> 
       {rowData.name} 
      </Text> 
     </View> 
    ); 
    }, 

    checkFilter: function() { 
    if (this.state.filtered) { 
     return 'red'; 
    } else { 
     return 'white' 
    } 
    }, 

    render: function() { 
    return (
     <View style={styles.container}> 
     <View> 
       <TouchableHighlight 
     onPress={() => this.onPress() } 
     style={{flexDirection: 'row', alignContent: 'center', alignItems: 'center', height:70, backgroundColor: 'blue'}}> 
         <Text style={[{color: this.checkFilter(), fontSize:22, textAlign: 'center'}]}>Change Filter</Text> 
       </TouchableHighlight> 
     </View> 
     <View style={{marginTop:10}}> 
     <ListView 
      renderRow={this._renderRow}  
      dataSource={this.state.dataSource} />       
     </View> 

     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex:1 
    }, 

}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp);