Reactive Native untergeordnete Komponente nicht aktualisiert, wenn der Reduxstatus geändert wird

Question

Ich habe eine untergeordnete Komponente, die eine Liste von Elementen in einem ListView darstellt. Die Daten für das ListView stammen von einem Redux-Informationsspeicherobjekt, das über das übergeordnete MapStateToProps übergeben wird. Das untergeordnete Objekt verfügt über Schaltflächen, die ein Element beim Drücken entfernen. Die Schaltfläche löst die entsprechenden Reduce-Dispatch-Aktionen aus und der Status wird korrekt aktualisiert, die untergeordnete Komponente wird jedoch nicht aktualisiert. Durch Breakpoints und Konsolenanweisungen habe ich überprüft, dass die untergeordnete Komponente ShouldUpdate und die untergeordnete KomponenteWillReceiveProps ausgelöst werden, wenn der Reduxstatus chagnes, die untergeordnete Rendermethode jedoch nicht nach der Statusänderung ausgelöst wird.

Eltern

<PendingActionsList 
     proposedStatusChanges={this.props.proposedStatusChanges} 
     certifications={this.props.certifications} 
     driverProfile={this.props.driverProfile} 
     acceptProposedStatusChange={this.props.acceptProposedStatusChange} 
     rejectProposedStatusChange={this.props.rejectProposedStatusChange} 
     navigator={this.props.navigator} 
     /> 

Kind

componentWillMount(){ 
    this.setState({ 
     proposedChanges:this.props.proposedStatusChanges 
    }); 

    } 
    shouldComponentUpdate(nextProps){ 
//fires when expected and returns expected value 
    return nextProps.proposedStatusChanges.length != nextProps.proposedStatusChanges.length; 
    } 
    componentWillReceiveProps(nextProps){ 
    //fires when props change as expected 
    console.log({'will receive props': nextProps}); 
    this.setState({ 
     proposedChanges:nextProps.proposedStatusChanges 
    }); 
    } 

render(){ 
//only fires at intial render 
const dataSource = this.ds.cloneWithRows(this.state.proposedChanges) 
    return(
     <View style={styles.container}> 
     <Text>Pending Actions </Text> 
     <ListView 
      dataSource={dataSource} 
      renderRow={(rowData) => this.renderRow(rowData)} 
      renderSeparator={(sectionId,rowId)=><View key={`${sectionId}-${rowId}`} style={{height:1,backgroundColor:'#D1D1D1'}}/>} 
      /> 
     </View> 
    ); 

Ich habe auch ohne den Staat Feld versucht, dies, das, was ich erwartet hatte, zu arbeiten, aber die gleichen Ergebnisse hatten.

Answer 1

Das ist, weil Sie für Ungleichheit in demselben Objekt die ganze Zeit überprüft:

//Replace this: 
return nextProps.proposedStatusChanges.length != nextProps.proposedStatusChanges.length; 
//With this: 
return nextProps.proposedStatusChanges.length != this.props.proposedStatusChanges.length;