React Native ListView không cập nhật về thay đổi dữ liệu

Question

Tôi không chắc tại sao ListView không cập nhật khi dữ liệu của tôi thay đổi. Tôi đã sọc mã của tôi xuống để làm cho nó dễ dàng để đọc và tạo ra một rnplay:

https://rnplay.org/apps/ivG0mg

Những gì tôi mong đợi xảy ra là, người dùng nhấp vào mục danh sách và của hàng bool isCollapsed là toggled làm nền màu đỏ. Điều thực sự xảy ra là nguồn dữ liệu được cập nhật nhưng chế độ xem danh sách không nhận ra thay đổi và không có gì mới được hiển thị. Bất kỳ ý tưởng?

'use strict'; 

var React = require('react-native'); 

var { 
    ScrollView, 
    Text, 
    Image, 
    StyleSheet, 
    TouchableHighlight, 
    AppRegistry, 
    View, 
    ListView, 
} = React; 

var styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     flexDirection: 'column', 
     padding: 15, 
    }, 
    red: { 
     backgroundColor: "red", 
    } 
}); 

var foods = [ 
    {key: 'Almond Milk (Homemade)', details:''}, 
    {key: 'Club Soda', details:'', isCollapsed: true}, 
    {key: 'Coconut Milk/Cream', details:''}, 
    {key: 'Coconut Water', details:''}, 
    {key: 'Coffee/Espresso', details:'', isCollapsed: true}, 
    {key: 'Fruit Juice', details:''}, 
    {key: 'Kombucha', details:''}, 
    {key: 'Mineral Water', details:''}, 
    {key: 'Unsweetened Tea', details:''}, 
    {key: 'Water', details:''}, 
    {key: 'Fruit Juice', details:''}, 
    {key: 'Kombucha', details:''}, 
    {key: 'Mineral Water', details:''}, 
    {key: 'Unsweetened Tea', details:''}, 
    {key: 'Water', details:''}, 
    {key: 'Fruit Juice', details:''}, 
    {key: 'Kombucha', details:''}, 
    {key: 'Mineral Water', details:''}, 
    {key: 'Unsweetened Tea', details:''}, 
    {key: 'Water', details:''}, 
    {key: 'Fruit Juice', details:''}, 
    {key: 'Kombucha', details:''}, 
    {key: 'Mineral Water', details:''}, 
    {key: 'Unsweetened Tea', details:''}, 
    {key: 'Water', details:''}, 
    {key: 'Fruit Juice', details:''}, 
    {key: 'Kombucha', details:''}, 
    {key: 'Mineral Water', details:''}, 
    {key: 'Unsweetened Tea', details:''}, 
    {key: 'Water', details:''}, 
]; 

class SampleApp extends React.Component{ 
    constructor(props){ 
     super(props); 
     var ds = new ListView.DataSource({ 
      rowHasChanged: (row1, row2) => row1 !== row2, 
     }); 
     this.state = { 
      dataSource: ds.cloneWithRows(foods), 
     }; 
    } 
    _renderRow(data, sectionID, rowID) { 
       return (
         <TouchableHighlight 
          style={[ 
            styles.container, 
            data.isCollapsed && styles.red]} 
       onPress={()=>this.onCollapse(rowID)}> 
       <Text>{data.key}</Text> 
      </TouchableHighlight> 
     ); 
    } 
    onCollapse(rowID: number) { 
     console.log("rowID", rowID); 
     foods[rowID].isCollapsed = !foods[rowID].isCollapsed; 
     this.setState({dataSource: this.state.dataSource.cloneWithRows(foods)}); 
    } 
    render() { 
     return(
      <ListView 
       style={styles.subContainer} 
       dataSource={this.state.dataSource} 
       renderRow={this._renderRow.bind(this)} 
       initialListSize={15}/> 
     ) 
    } 
}; 

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

Answer 1

Dưới đây là một liên kết đến một phiên bản làm việc:

https://rnplay.org/apps/GWoFWg

Đây là những thay đổi mà tôi cần phải thực hiện để sửa chữa nó:

constructor(props){ 
    super(props); 
    var ds = new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => row1 !== row2, 
    }); 
    this.state = { 
     dataSource: ds.cloneWithRows(foods), 
     db: foods, 
    }; 
} 

và điều này:

onCollapse(rowID: number) { 
    var newArray = this.state.db.slice(); 
    newArray[rowID] = { 
     key: newArray[rowID].key, 
     details: newArray[rowID].details, 
     isCollapsed: newArray[rowID].isCollapsed == false ? true : false, 
    }; 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(newArray), 
     db: newArray, 
    }); 
} 

Answer 2

Nhìn như thế này sẽ là giải pháp bạn cần React-Native Updating List View DataSource

Nhưng tôi chơi đùa với nó một chút và cũng không thể có được nó làm việc. https://rnplay.org/apps/sk_ukQ

Không chắc chắn nếu nó sẽ giúp đỡ, nhưng tôi đã cố gắng thiết lập này, mảng như trống và sáng có thể xóa toàn bộ danh sách ... this.setState ({dataSource: this.state.dataSource.cloneWithRows ([ ])});

Tôi nghĩ vì một lý do nào đó, nó sử dụng phiên bản được lưu trong bộ nhớ cache của mảng ban đầu chứ không phải mảng được cập nhật. Chỉ cần không chắc chắn lý do tại sao.