0

ListView にアイテムのリストをレンダリングする子コンポーネントがあります。ListView のデータは、親の mapStateToProps を介して渡された Redux ストア オブジェクトから生成されます。子オブジェクトには、押されたときに項目を削除するボタンがあります。ボタンは適切な redux ディスパッチ アクションを起動し、ステータスは正しく更新されますが、子コンポーネントは更新されません。ブレーク ポイントとコンソール ステートメントを通じて、子 componentShouldUpdate と子 componentWillReceiveProps は redux 状態が変化したときに起動されることを確認しましたが、子 render メソッドは状態の変化後に起動しません。

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

これは私が期待していたものですが、同じ結果が得られました。

4

1 に答える 1