React Native Child Component Not Updated when redu

问题:

I have child component that renders a list of items in a ListView. The data for the ListView originates from a Redux store object passed through the parent mapStateToProps. The child object has buttons that will remove an item when pressed. The button fires the appropriate redux dispatch actions and the status is updated correctly, but the child component does not update. Through break points and console statements, I've verified that child componentShouldUpdate and child componentWillReceiveProps get fired when the redux state chagnes, but the child render method does not fire after the state change.

Parent

 <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}
      />

Child

    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>
    );

I've tried this without the state field too, which is what I was expecting to work, but had the same results.

回答1:

That's because you're checking for inequality in the same object all the time:

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