陣營本地的ListView清除數據源

Question

當我更新像

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]]和列表視圖可以正確地呈現，不知道爲什麼，它只是工作:(

Answer 1

這很難說，正是因爲我沒有看到你的數據源的初始狀態（this.state .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);