Redux状态更改时，React Native Child Component未更新 [英] React Native Child Component Not Updated when redux state changes

问题描述

我有一个子组件，该子组件在ListView中呈现项目列表. ListView的数据源自通过父mapStateToProps传递的Redux存储对象.子对象具有按钮，当按下该按钮时，该按钮将删除一个项目.该按钮将触发适当的redux调度操作，并且状态会正确更新，但子组件不会更新.通过断点和控制台语句，我已经验证了在redux状态改变时会触发子componentShouldUpdate和child componentWillReceiveProps，但是在状态更改后不会渲染子render方法.

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.

父母

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

孩子

    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.

推荐答案

那是因为您一直都在检查同一对象中的不等式:

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;

这篇关于Redux状态更改时，React Native Child Component未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！