FlatList項目は更新されません）

Question

私は複数選択モーダルを構築しています。ユーザーが項目を押すと、項目は「チェック済み」とマークされます。

問題 Iは、IDアレイから/除去IDを追加しました。私が開いてモーダルをチェックすると、「チェック」サインは表示されません。しかし、モーダルをもう一度閉じて開くと、「チェック」サインが表示されます。

選択した項目を追跡するために、私は、モーダル・コンポーネントの状態の項目を定義しました。ここ

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

が反応ネイティブモーダルIこれは、各項目

_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> 

画面にモーダルを表示するために使用され、フラットリストのアイテムコール_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>); 
    } 

その他のアドバイスもあります。このポストを読んでくれてありがとう。

UPDATE私はコードでデバッグしましたが、アイテムを押すと_renderItemForMultipleは通過しません。 _renderItemForMultipleのパラメータを定義していなかったからだと思います。どのようにアイテムをそのパラメータに渡すことができますか？何か案が？

Answer 1

でも、あなたの状態が変化しても、あなたは<FlatList>にそれを渡していないので、その小道具は変更されません。そのshouldComponentUpdateメソッドは、その小道具が変更されないときにfalseを返します。ドキュメントの状態として：

FlatListにextraData={this.state}を渡すことによって、私たちはときstate.selected変更FlatList自体が再レンダリングすることを確認してください。この小道具を設定しないと、FlatListはPureComponentであり、小道具の比較で変更が表示されないため、アイテムを再レンダリングする必要があることはわかりません。

extraData={this.state}からFlatListに渡す必要があります。