प्रतिक्रिया बदलें मूल सूची देखें डेटा परिवर्तन पर अपडेट नहीं किया गया

Question

मुझे यकीन नहीं है कि मेरा डेटा बदलते समय ListView क्यों अपडेट नहीं हो रहा है। मैं नीचे इसे पढ़ने के लिए आसान बनाने के लिए मेरी कोड धारीदार और एक rnplay बना लिया है:

https://rnplay.org/apps/ivG0mg

क्या मैं होने की अपेक्षा है, तो उपयोगकर्ता सूची आइटम और पंक्ति के bool isCollapsed क्लिक करता है पृष्ठभूमि बनाने चालू किए जाने पर लाल। वास्तव में क्या होता है डेटासेट को अद्यतन किया जाता है लेकिन सूची दृश्य परिवर्तन को पहचान नहीं पाता है और कुछ भी नया प्रस्तुत नहीं किया जाता है। कोई विचार?

'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

यहाँ एक काम कर रहे संस्करण का लिंक है:

https://rnplay.org/apps/GWoFWg

इन परिवर्तनों को मैं इसे ठीक करने के लिए बनाने की जरूरत है कर रहे हैं:

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

और इस:

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

इस तरह देखा समाधान होगा आप React-Native Updating List View DataSource

जरूरत है लेकिन मैं इसे एक छोटे के साथ चारों ओर खेला है और यह भी यह काम नहीं कर सकता है। https://rnplay.org/apps/sk_ukQ

सुनिश्चित नहीं हैं कि अगर यह मदद मिलेगी, लेकिन मैं इस सरणी की स्थापना के रूप में खाली और पूरी सूची ... this.setState ({डेटा स्रोत स्पष्ट करने में सक्षम हूँ करने की कोशिश की: this.state.dataSource.cloneWithRows ([ ])});

मुझे लगता है कि यह किसी कारण से अद्यतन सरणी के बजाय मूल सरणी के कैश किए गए संस्करण का उपयोग कर रहा है। बस यकीन नहीं क्यों।