react-native - Expo React Native SectionList レンダリング項目を複数回

Question

同じ質問に関して多くの問題を見つけましたが、どれも問題を解決していないようです。現在、私は redux を使用してオブジェクトの配列をフェッチし、そのデータを操作して SectionList データ要件に一致させ、それを SectionList セクション プロップにフィードしています。RenderItem では、FlatList を使用し、項目 propsections.data にフィードしています。最後に、FLatList の renderItem は PureComponent です。shouldComponentUpdate を使用してみましたが、他の人が提案した sectionlist の他の多数の小道具を使用しましたが、何も機能していないようです。SectionList は一貫して 3 回以上項目をレンダリングします。これが私のコードです：

// SECTION LIST COMPONENT 
import React, { Component } from 'react';
import {
View,
SectionList,
ActivityIndicator,
Text,
AsyncStorage,
} from 'react-native';
import { connect } from 'react-redux';
import { getReleases } from '#modules/Collection/actions';
import { Header, SectionFlatList } from '#common/';
class UserCollections extends Component {
static navigationOptions = {
 header: null,
};
state = {
 records: [],
 refreshing: false,
 userData: {},
 page: 1,
};

componentDidMount() {
 this.getUserCollection();
}

getUserCollection = async () => {
 const token = await AsyncStorage.getItem('access_token');
 const tokenSecret = await AsyncStorage.getItem('access_token');
 const user = await AsyncStorage.getItem('userMeta');
 const userMeta = JSON.parse(user);
 const { username } = userMeta;
 const { page } = this.state;
 const folder = 0;
 const accessData = {
   token,
   tokenSecret,
 };
 try {
   await this.props.dispatch(
     getReleases(accessData, username, folder, page)
   );
 } catch (error) {
   console.log('ERROR', error);
 }
};

handleRefresh = () => {
 this.setState(
   {
     page: 1,
     seed: this.state.seed + 1,
     refreshing: true,
   },
   () => {
     this.getUserCollection();
     this.setState({ refeshing: false });
   }
 );
};
handleLoadMore = () => {
 this.setState(
   {
     page: this.state.page + 1,
   },
   () => {
     this.getUserCollection();
   }
 );
};
renderFooter = () => {
 if (!this.state.loading) return null;
 return (
   <View
     style={{
       paddingVertical: 20,
       borderTopWidth: 1,
       borderColor: '#CED0CE',
     }}
   >
     <ActivityIndicator animating size="large" />
   </View>
 );
};

_sectionKeyExtractor = (section, index) => 'S' + index.toString();

_renderSections = ({ section }) => (
 <SectionFlatList {...this.props} section={section} />
);

render() {
 const { releases } = this.props;

 return (
   <View style={styles.mainContainer}>
     <View style={styles.headerContainer}>
       <Header headerText={'Collection'} />
     </View>
     <View style={styles.contentContainer}>
       <SectionList
         sections={releases}
         extraData={releases}
         renderItem={this._renderSections}
         renderSectionHeader={({ section: { title } }) => (
           <Text style={{ fontWeight: 'bold', color: '#fff' }}>{title}</Text>
         )}
         keyExtractor={this._sectionKeyExtractor}
         refreshing={this.state.refreshing}
         onRefresh={this.handleRefresh}
         onEndReached={this.handleLoadMore}
       />
     </View>
   </View>
 );
}
}

const styles = {
textContainer: {
 paddingBottom: 50,
},
contentContainer: {
 flex: 1,
 backgroundColor: '#000',
 alignItems: 'center',
 justifyContent: 'space-around',
},
contentContainerStyle: {
 flexDirection: 'column',
},
mainContainer: {
 flex: 1,
},
};

mapStateToProps = state => {
console.log('MAP STATE TO PROPAS STATE', state);
return {
 releases: state.UserCollection.releases,
};
};

export default connect(mapStateToProps)(UserCollections);

// SECTIONLIST RENDERITEM COMPONENT (FLATLIST)
import React, { PureComponent } from 'react';
import { FlatList, View } from 'react-native';
import { isEqual } from 'lodash';
import { RecordItem } from './';

class SectionFlatList extends PureComponent {
  listKey = (item, index) => 'D' + index.toString();

  render() {
    const {
      section,
      navigation,
      screenProps: {
        user: {
          accessData: { userMeta },
        },
      },
    } = this.props;
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={section.data}
          renderItem={({ item }) => (
            <RecordItem
              item={item}
              navigation={navigation}
              userMeta={userMeta}
            />
          )}
          keyExtractor={this.listKey}
          ListFooterComponent={this.renderFooter}
          contentContainerStyle={styles.contentContainerStyle}
          numColumns={3}
          maxToRenderPerBatch={11}
          initialNumToRender={11}
          removeClippedSubviews={false}
        />
      </View>
    );
  }
}

const styles = {
  contentContainerStyle: {
    flexDirection: 'column',
  },
};

export { SectionFlatList };

import React, { PureComponent } from 'react';
import { TouchableOpacity, View, Image } from 'react-native';
class RecordItem extends PureComponent {
  // shouldComponentUpdate(nextProps, nextState) {
  //   if (this.props.item.instance_id === nextProps.item.instance_id)
  //     return false;
  // }
  render() {
    const { item } = this.props;
    return (
      <View>
        <TouchableOpacity
          key={item.instance_id}
          onPress={() => {
            navigation.navigate('AlbumDetail', {
              item: item,
              inCollection: true,
              inWantlist: false,
              userData: userMeta,
            });
          }}
        >
          <Image
            style={styles.albumCovers}
            source={{ uri: item.basic_information.cover_image }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = {
  albumCovers: {
    height: 124,
    width: 124,
    marginLeft: 0.5,
    marginRight: 0.5,
    marginTop: 0.5,
    marginBottom: 0.5,
  },
};

export { RecordItem };