React native 带有单选按钮的React Native Flatlist工作缓慢

我有一个带有自定义单选按钮实现的flatlist，但当我点击flatlist项时，它会等待大约一秒钟，然后才更改为活动按钮。我尝试将回调与renderItem和itemKeyExtractor函数一起使用，但没有帮助

以下是我的屏幕组件的代码：

export const PickOrganizationScreen = (props) => {
  const { navigation, setOrganization, loadProcedureProviders, items, isLoading, procedureId, organizationId } = props;

  useFocusEffect(
    React.useCallback(()=>{loadProcedureProviders(procedureId);},[loadProcedureProviders, procedureId])
  );

  const renderItem = ({item}) => {
    return (
    <OrganizationItem
      title={item.Title}
      checked = {item.Id === organizationId}
      onPress={() => {
        setOrganization(item.Id, item.Title);
      }}
    />);
  };

  const itemKeyExtractor = (item) => item.Id;

  return (
    isLoading ? (
      <Spinner />
    ) : (
      items.length > 0 ? (
        <View style={styles.container}>
          <View style={styles.paragraph}>
            <Text style={styles.subtitle}>{I18n.t('pickOrganization')}</Text>
          </View>
          <View style={styles.alertMessage}>
            <View style={styles.alertIcon}>
              <Icon name="info" width={32} height={32} fill={Colors.primaryRed} />
            </View>
            <View>
              <Text style={styles.alertText}>{I18n.t('pickOrganizationToRegisterService')}</Text>
            </View>
          </View>

          <FlatList
            data = {items}
            renderItem = {renderItem}
            keyExtractor = {itemKeyExtractor}
            extraData={organizationId}
          />

          <View style={styles.buttonWrapper}>
            <ScreenButton
              title={I18n.t('goToRegister')}
              onPress={ () => {
                navigation.navigate('ServiceSummary');
              }}/>
          </View>
        </View>
        ) : (
          <NotFound extraText={I18n.t('notFoundExtra')}/>
        )
     )
  );
};

export const OrganizationItem = ({title, checked, onPress}) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.itemContainer}>
        <View style={styles.itemIcon}>
          { checked ? (
              <Icon name="radio-button-on" width={16} height={16} fill={Colors.primaryRed} />
            ) :
            (
              <Icon name="radio-button-off" width={16} height={16} fill={Colors.gray} />
            )
          }
        </View>
        <View style={styles.itemText}>
          <Text style={styles.title}>{title}</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};

导出常量PickOrganizationScreen=（道具）=>{ const{navigation，setOrganization，loadProcedureProviders，items，isload，procedureId，organizationId}=props； 聚焦效应( React.useCallback（（）=>{loadProcedureProviders（procedureId）；}[loadProcedureProviders，procedureId]） ); 常量renderItem=（{item}）=>{ 返回( { setOrganization（item.Id、item.Title）； }} />); }; const itemKeyExtractor=（item）=>item.Id； 返回( 孤岛( ) : ( 项目长度>0( {I18n.t（'pickOrganization'）} {I18n.t（'pickOrganizationToRegisterService'）} { 导航。导航（“服务摘要”）； }}/> ) : ( ) ) ); }; 以下是flatlist项目组件的代码：

export const PickOrganizationScreen = (props) => {
  const { navigation, setOrganization, loadProcedureProviders, items, isLoading, procedureId, organizationId } = props;

  useFocusEffect(
    React.useCallback(()=>{loadProcedureProviders(procedureId);},[loadProcedureProviders, procedureId])
  );

  const renderItem = ({item}) => {
    return (
    <OrganizationItem
      title={item.Title}
      checked = {item.Id === organizationId}
      onPress={() => {
        setOrganization(item.Id, item.Title);
      }}
    />);
  };

  const itemKeyExtractor = (item) => item.Id;

  return (
    isLoading ? (
      <Spinner />
    ) : (
      items.length > 0 ? (
        <View style={styles.container}>
          <View style={styles.paragraph}>
            <Text style={styles.subtitle}>{I18n.t('pickOrganization')}</Text>
          </View>
          <View style={styles.alertMessage}>
            <View style={styles.alertIcon}>
              <Icon name="info" width={32} height={32} fill={Colors.primaryRed} />
            </View>
            <View>
              <Text style={styles.alertText}>{I18n.t('pickOrganizationToRegisterService')}</Text>
            </View>
          </View>

          <FlatList
            data = {items}
            renderItem = {renderItem}
            keyExtractor = {itemKeyExtractor}
            extraData={organizationId}
          />

          <View style={styles.buttonWrapper}>
            <ScreenButton
              title={I18n.t('goToRegister')}
              onPress={ () => {
                navigation.navigate('ServiceSummary');
              }}/>
          </View>
        </View>
        ) : (
          <NotFound extraText={I18n.t('notFoundExtra')}/>
        )
     )
  );
};

export const OrganizationItem = ({title, checked, onPress}) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.itemContainer}>
        <View style={styles.itemIcon}>
          { checked ? (
              <Icon name="radio-button-on" width={16} height={16} fill={Colors.primaryRed} />
            ) :
            (
              <Icon name="radio-button-off" width={16} height={16} fill={Colors.gray} />
            )
          }
        </View>
        <View style={styles.itemText}>
          <Text style={styles.title}>{title}</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};

export const OrganizationItem=（{title，checked，onPress}）=>{
返回(
{检查过了吗(
) :
(
)
}
{title}
);
};

尝试记忆OrganizationItem。onPress in OrganizationItem是否更改items对象？如果是这样，即使只做了一个小的更改，它也会重新呈现整个平面列表。如果您记忆，则除非传递给它的道具发生更改，否则记忆的组件不会重新播放

   export const OrganizationItem = React.memo(({title, checked, onPress}) => {
   return (
<TouchableOpacity onPress={onPress}>
  <View style={styles.itemContainer}>
    <View style={styles.itemIcon}>
      { checked ? (
          <Icon name="radio-button-on" width={16} height={16} fill={Colors.primaryRed} />
        ) :
        (
          <Icon name="radio-button-off" width={16} height={16} fill={Colors.gray} />
        )
      }
    </View>
       <View style={styles.itemText}>
         <Text style={styles.title}>{title}</Text>
       </View>
     </View>
   </TouchableOpacity>
   );
 });

export const OrganizationItem=React.memo（{title，checked，onPress}）=>{
返回(
{检查过了吗(
) :
(
)
}
{title}
);
});

谢谢你的回答，但没有帮助。OrganizationItem不会产生任何状态更改，onPress用于导航到下一个屏幕，正如我前面提到的onPress={（）=>{navigation.navigate（'ServiceSummary'）；}}}在OrganizationItem的TouchableOpacity内部以及代码中都有一个onPress<代码>{setOrganization（item.Id，item.Title）；}}/>这是对OrganizationId的变异，它使整个屏幕组件重新呈现。我建议您在需要从多个组件访问和编辑状态的情况下使用react-redux。是的，您是对的。但我实际上在我的应用程序中使用了redux（setOrganization和organizationId作为道具来自HOC）。无法弄清楚如何更新organizationId，然后在我的平面列表中使用它来指向、选择哪个项目，而不是重新渲染所有屏幕组件。