当分页列表添加到底部时，SectionList 会跳转/出现故障

Question

我的分页代码的响应看起来像 -

第1页

0: {title: '2024-07-11', data: Array(3)}
1: {title: '2024-07-12', data: Array(1)}
2: {title: '2024-07-15', data: Array(2)}
3: {title: '2024-07-16', data: Array(1)}
4: {title: '2024-07-17', data: Array(1)}
5: {title: '2024-07-19', data: Array(3)}
6: {title: '2024-07-20', data: Array(2)}
7: {title: '2024-07-22', data: Array(2)}
8: {title: '2024-07-23', data: Array(4)}
9: {title: '2024-07-24', data: Array(1)}
length: 10

第2页

0: {title: '2024-07-11', data: Array(3)}
1: {title: '2024-07-12', data: Array(1)}
2: {title: '2024-07-15', data: Array(2)}
3: {title: '2024-07-16', data: Array(1)}
4: {title: '2024-07-17', data: Array(1)}
5: {title: '2024-07-19', data: Array(3)}
6: {title: '2024-07-20', data: Array(2)}
7: {title: '2024-07-22', data: Array(2)}
8: {title: '2024-07-23', data: Array(4)}
9: {title: '2024-07-24', data: Array(1)}
10: {title: '2024-07-24', data: Array(3)}
11: {title: '2024-07-11', data: Array(3)}
12: {title: '2024-07-12', data: Array(1)}
13: {title: '2024-07-15', data: Array(2)}
14: {title: '2024-07-16', data: Array(2)}
15: {title: '2024-07-18', data: Array(2)}
16: {title: '2024-07-19', data: Array(3)}
17: {title: '2024-07-22', data: Array(2)}
18: {title: '2024-07-23', data: Array(2)}
length: 19

第3页

0: {title: '2024-07-11', data: Array(3)}
1: {title: '2024-07-12', data: Array(1)}
2: {title: '2024-07-15', data: Array(2)}
3: {title: '2024-07-16', data: Array(1)}
4: {title: '2024-07-17', data: Array(1)}
5: {title: '2024-07-19', data: Array(3)}
6: {title: '2024-07-20', data: Array(2)}
7: {title: '2024-07-22', data: Array(2)}
8: {title: '2024-07-23', data: Array(4)}
9: {title: '2024-07-24', data: Array(1)}
10: {title: '2024-07-24', data: Array(3)}
11: {title: '2024-07-11', data: Array(3)}
12: {title: '2024-07-12', data: Array(1)}
13: {title: '2024-07-15', data: Array(2)}
14: {title: '2024-07-16', data: Array(2)}
15: {title: '2024-07-18', data: Array(2)}
16: {title: '2024-07-19', data: Array(3)}
17: {title: '2024-07-22', data: Array(2)}
18: {title: '2024-07-23', data: Array(2)}
19: {title: '2024-07-24', data: Array(1)}
20: {title: '2024-07-25', data: Array(5)}
21: {title: '2024-07-11', data: Array(2)}
22: {title: '2024-07-12', data: Array(4)}
23: {title: '2024-07-15', data: Array(1)}
24: {title: '2024-07-17', data: Array(2)}
25: {title: '2024-07-18', data: Array(1)}
26: {title: '2024-07-20', data: Array(1)}
27: {title: '2024-07-22', data: Array(1)}
length: 28

我正在使用react-query的useInifiniteQuery并且页面值被展平。

当获取并呈现第三个也是最后一个页面时，我看到以下故障 -

import format from 'date-fns/format';
import { useCallback } from 'react';
import { RefreshControl, SectionList, View } from 'react-native';

import { BookableAppointment } from '@app-types/appointments';
import {
  AppointmentCard,
  AppointmentListLoader,
} from '@components/app-specific';
import { CircularLoader, Typography } from '@components/core';
import { createUseStyle } from '@theme';

import { useGetAppointmentBooking } from '../../hooks/get-appointment-booking';

export const useBookableAppointmentsStyle = createUseStyle(t => ({
  listEmptyContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },

  header: {
    backgroundColor: t.palette.background.main,
  },

  contentContainer: {
    gap: 16,
    paddingVertical: t.moderateVerticalScale(10, 1),
    flexGrow: 1,
  },
}));

export const BookableAppointments = () => {
  const styles = useBookableAppointmentsStyle();

  const {
    data,
    isLoading,
    isFetchingNextPage,
    loadMore,
    isRefetching,
    refetch,
  } = useGetAppointmentBooking();

  const renderBookableAppointment = useCallback(
    ({ item }: { item: BookableAppointment }) => {
      return (
        <AppointmentCard
          key={item.EndDateTime.toString()}
          appointment={{
            EndDateTime: item.EndDateTime,
            Id: item.Id,
            LocationName: item.LocationName,
            StartDateTime: item.StartDateTime,
          }}
        />
      );
    },
    [],
  );

  const onPullToRefresh = useCallback(async () => {
    await refetch();
  }, [refetch]);

  if (isLoading && !data.length) {
    return <AppointmentListLoader />;
  }

  const ListEmptyComponent = !isLoading ? (
    <View style={styles.listEmptyContainer}>
      <Typography variant="body1" color="description" align="center">
        Unfortunately, there are no available appointments for the selected date
        range.
      </Typography>
    </View>
  ) : null;

  const renderSectionHeader = ({
    section: { title },
  }: {
    section: { title: string };
  }) => (
    <View style={styles.header}>
      <Typography variant="h4" weight="bold">
        {format(new Date(title), 'EEEE, dd MMMM yyyy')}
      </Typography>
    </View>
  );

  return (
    <SectionList
      keyExtractor={item => item.EndDateTime.toString()}
      sections={data}
      renderItem={renderBookableAppointment}
      refreshControl={
        <RefreshControl refreshing={isRefetching} onRefresh={onPullToRefresh} />
      }
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={
        isFetchingNextPage && data.length ? <CircularLoader /> : null
      }
      ListEmptyComponent={ListEmptyComponent}
      renderSectionHeader={renderSectionHeader}
      contentContainerStyle={styles.contentContainer}
    />
  );
};

我尝试添加

initialNumToRender

、

maxToRenderPerBatch

等来获得额外的性能提升，但情况变得更糟。

我不确定为什么第二页上的内容会完美呈现，但当第三页呈现时我会看到这个故障

Answer 1

嗨，我目前也在解决这个问题。 有一个类似的问题https://github.com/facebook/react-native/issues/36414它似乎来自sectionList本身及其虚拟化，并且它出现在新的react-native版本中。 默认情况下，sectionList 会提前加载 21 个尚未出现在视图中的项目。您可以使用 windowSize 调整该值。当您调高该值时，直到列表更大并且您滚动得更远时，问题才会发生。 而且，当你将 StickySectionHeadersEnabled 设置为 true 时，它似乎主要发生。这是 iOS 上的默认设置。所以问题似乎是SectionList虚拟化与粘性标头相结合导致了问题。禁用虚拟化将完全消除该错误，但随后您可以渲染一个无休止的列表，这可能会导致其他问题。 可能的解决方案是：

• 使用其他第三方列表（FlashList、Recyclerlistview）
• 禁用粘性标头（也许构建您自己的标头组件来弥补）
• 禁用虚拟化或增加窗口大小（可能会导致其他问题）

我想我会研究其他列表组件，因为我也遇到了其他错误，并且认为我无法使用sectionList创建防弹提要。 祝你好运

编辑： 我切换到 FlashList，它就像一个魅力。 https://shopify.github.io/flash-list/docs/guides/section-list 我必须将数据结构更改为平面数组，如教程中所示。但这并不是很多工作，到目前为止，我在sectionList中遇到的所有错误都已得到解决，并且性能非常好。