redux 네이티브 하위 구성 요소 redux 상태가 변경 될 때 업데이트되지 않는다

Question

ListView에서 항목 목록을 렌더링하는 하위 구성 요소가 있습니다. ListView의 데이터는 부모 mapStateToProps를 통해 전달 된 Redux 저장소 개체에서 비롯됩니다. 자식 객체에는 눌렀을 때 항목을 제거하는 버튼이 있습니다. 이 단추는 적절한 redux 디스패치 조치를 발생시키고 상태는 올바르게 업데이트되지만 하위 구성 요소는 업데이트되지 않습니다. 중단 점 및 콘솔 문을 통해 필자는 redux 상태가 종료 될 때 child componentShouldUpdate 및 child componentWillReceiveProps가 실행되지만 상태 변경 후에 자식 렌더링 메서드가 실행되지 않는다는 것을 확인했습니다.

부모

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

나는 일을 기대하고 있었는지, 이는 너무 상태 필드없이 시도했지만 같은 결과를 했어. 같은 개체의 불평등에 대한 모든 시간을 확인하고 있기 때문이다

Answer 1

:

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