当redux状态更改时，React Native子组件未更新-Java 学习之路

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

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

我已经尝试了这个没有状态字段，这是我期望的工作，但有相同的结果 .

1 回答

那是因为你一直在检查同一个对象中的不等式：

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

回复于 2024-05-02T09:53:14+08:00

当redux状态更改时，React Native子组件未更新

1 回答

相关问题