setState()를 실행하면 FlatList 항목이 업데이트되지 않습니다.

Question

여러 개의 선택 모달을 작성 중입니다. 사용자가 항목을 누르면 항목이 '선택됨'으로 표시되어야합니다.

문제 id 배열에서 id를 추가/제거했습니다. 내가 모달을 열었을 때 '확인'표시가 보이지 않습니다. 그러나 모달을 닫고 다시 열면 '확인'기호가 표시됩니다.

나는 모달 구성 요소의 상태에있는 항목을 정의, 선택한 항목을 추적합니다. 여기

state = { 
    selectedSeasonIds: this.props.selectedSeasonIds, 
    } 

반응 네이티브 모달 나는이 각 항목

_renderItemForMultiple = ({item}) => { 
    return (
     <TouchableOpacity 
     style={styles.itemStyle} 
     onPress={() => {this._handleMultipleItemPress(item.id)}}> 
     <RkText>{item.value}</RkText> 
     { this._renderCheck(item.id) } <<< Here is the problem 
     </TouchableOpacity> 
    ); 
    } 

사용자가 항목을 클릭

에 대한 기능을 렌더링

<Modal 
     isVisible={isSelectorVisible} 
     onBackdropPress = {() => this.props.hideSelector()}> 
     <View style={styles.modalContainer}> 
      <FlatList 
       style={styles.root} 
       data={this.props.items} 
       ItemSeparatorComponent={this._renderSeparator} 
       keyExtractor={this._keyExtractor} 
       renderItem={this._renderItemForMultiple}/> 
     </View> 
</Modal> 

화면에 모달를 표시하는 데 사용하는 것입니다, FlatList의 상품 통화 _handleMultipleitemPress

_handleMultipleItemPress = (id) => { 
    let { selectionType } = this.props; 
    let { selectedSeasonIds, selectedSizeIds, selectedColorIds } = this.state; 
    if(selectionType===2) { 
     if(_.includes(this.state.selectedSeasonIds, id)) { 
     let newSelectedSeasonIds = _.filter(this.state.selectedSeasonIds, (curObject) => { 
      return curObject !== id; 
     }); 
     this.setState({selectedSeasonIds : newSelectedSeasonIds}); 
     } else { 
     let newSelectedSeasonIds = [...this.state.selectedSeasonIds, id]; 
     this.setState({selectedSeasonIds : newSelectedSeasonIds}); 
     } 
    } 
    // season Select Action 
    this.props.seasonSelectAction(id); 
    } 

문제 id 배열에 id를 추가/제거했습니다. 내가 모달을 열었을 때 '확인'표시가 보이지 않습니다. 그러나 모달을 닫고 다시 열면 '확인'기호가 표시됩니다.

우리는 setState을 renderCheck()에도 불구하고 아무 래도 모달이 렌더링되지 않습니다. 왜 그런가? 어떻게 해결할 수 있습니까?

_renderCheck = (id) => { 
    let { selectionType, selectedSeasonIds, selectedSizeIds, selectedColorIds } = this.props; 
    if(selectionType===2) { 
     if(_.includes(this.state.selectedSeasonIds, id)) { 
     return (<RkText>Check </RkText>); 
     } 
    } 
    return (<RkText> </RkText>); 
    } 

기타 조언도 환영합니다. 이 게시물을 읽어 주셔서 감사합니다.

업데이트 코드로 디버깅했으며 항목을 누르면 _renderItemForMultiple을 통과하지 않습니다. _renderItemForMultiple에 대한 매개 변수를 정의하지 않았기 때문입니다. 항목을 매개 변수로 전달하려면 어떻게해야합니까? 어떤 생각?

Answer 1

상태가 변경 되더라도 <FlatList>으로 전달하지 않으므로 해당 소품이 변경되지 않습니다. 해당 shouldComponentUpdate 메서드는 해당 소품이 변경되지 않을 때 false을 반환합니다. 워드 프로세서 상태로 :

FlatList에 extraData={this.state}를 전달하여 우리는 그 자체가 때 state.selected 변경을 다시 렌더링 FlatList 확인하십시오. 이 소품을 설정하지 않으면 FlatList은 PureComponent이기 때문에 항목을 다시 렌더링해야한다는 것을 모를 것이며 소품 비교는 변경 사항을 표시하지 않습니다.

extraData={this.state}을 FlatList으로 전달해야합니다.