React Native FlatList分页异常：旧数据消失仅显示新数据求助

问题根源 #

1. 状态更新的闭包陷阱：直接使用feedArray合并数据时，React异步状态更新特性会导致函数捕获旧的状态值，多次请求后新数据会覆盖旧值而非追加。
2. 非状态变量的状态混乱：stopFetchMore是普通变量，组件重渲染后会重置，且闭包会导致异步操作中无法正确控制请求状态。
3. index作为key的渲染异常：用index作为FlatList的keyExtractor，数据更新时FlatList会错误复用组件，引发旧数据消失的视觉问题。
4. 加载状态更新时机错误：handleOnEndReached中在API请求未完成时就关闭加载状态，可能导致重复触发请求，进一步加剧状态混乱。

修复步骤 #

1. 使用函数式更新合并数据 #

将直接依赖feedArray的状态更新改为函数式更新，确保每次基于最新状态追加数据：

// 替换原setFeed([...feedArray, ...response.data.message.Items])
setFeed(prevFeed => [...prevFeed, ...response.data.message.Items]);

2. 将stopFetchMore改为React状态 #

用useState声明该变量，避免闭包和重置问题：

const [stopFetchMore, setStopFetchMore] = useState(false);

替换所有直接赋值的地方：

• stopFetchMore = true → setStopFetchMore(true)
• stopFetchMore = false → setStopFetchMore(false)

3. 修正请求控制逻辑 #

调整handleOnEndReached和getCards，确保请求完成后再更新状态，避免重复请求：

// 修改getCards为async函数
const getCards = async () => {
  const token = JWTToken('');
  var axios = require('axios');
  var data = JSON.stringify({
    userName: userName.toLocaleLowerCase(),
    userEmail: email,
    userId: userId,
    channel: userSelectedChannel,
    rangeKey: lastKey,
  });

  var config = {
    method: 'post',
    url: BASE_URL + GET_CARDS,
    headers: {
      'x-jwt-token': token,
      'Content-Type': 'application/json',
    },
    data: data,
  };

  try {
    const response = await axios(config);
    setLoader(false);
    const res = response.data.message;
    // 同样用函数式更新count，避免闭包问题
    setCount(prevCount => prevCount + 1);

    if (res.hasOwnProperty('LastEvaluatedKey')) {
      const lastEvaluatedKey = response.data.message.LastEvaluatedKey.createdAt;
      console.log('last key', lastEvaluatedKey);
      setLastKey(lastEvaluatedKey);
    } else {
      setLastKey('');
      setStopFetchMore(true); // 无更多数据时停止请求
    }

    setFeed(prevFeed => [...prevFeed, ...response.data.message.Items]);
  } catch (error) {
    console.log('feed error', error);
    setLoader(false);
    Alert.alert('Oops!Something went wrong');
    setStopFetchMore(false); // 请求失败允许重新触发
  }
};

// 修正handleOnEndReached逻辑
const handleOnEndReached = async () => {
  console.log('count is', count);
  // 避免重复请求：正在加载或已停止时直接返回
  if (loadingMore || stopFetchMore) return;

  if (lastKey !== '' || (lastKey === '' && count === 1)) {
    setLoadingMore(true);
    setStopFetchMore(true);
    try {
      await getCards(); // 等待请求完成
    } finally {
      setLoadingMore(false);
    }
  }
};

4. 替换keyExtractor为唯一标识 #

不要用index作为key，改用item的唯一属性（比如createdAt或id）：

// 替换原keyExtractor={(item, index) => index}
keyExtractor={(item) => item.createdAt.toString()}

5. 调整FlatList的触发阈值 #

适当调小onEndReachedThreshold，避免过早触发请求：

onEndReachedThreshold={0.1}

完整修改后的FlatList代码 #

<FlatList
  data={feedArray}
  renderItem={({item, index}) => (
    <RenderCard
      item={item}
      navigation={navigation}
      index={index}
      managePost={false}
      isPaymentReport={false}
      isBookmark={false}
      previewMode={false}
      isPinnedPost={false}
    />
  )}
  numColumns={1}
  keyExtractor={(item) => item.createdAt.toString()}
  contentContainerStyle={{
    marginBottom: height * 0.1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
  }}
  showsVerticalScrollIndicator={false}
  onEndReachedThreshold={0.1}
  bounces={false}
  onEndReached={handleOnEndReached}
  onScrollBeginDrag={() => {
    setStopFetchMore(false);
  }}
  ListFooterComponent={() => loadingMore && <ListFooterComponent />}
/>

内容的提问来源于stack exchange，提问作者deepanshi gupta