React Native FlatList下拉刷新异常：分页数据重复叠加问题求助

嘿，我明白你遇到的困扰了——下拉刷新本该重置列表为第0页内容，结果却把新数据追加到旧列表后面，导致ID重复对吧？咱们一步步把这个问题搞定：

问题根源分析 #

你当前的代码有几个关键问题：

1. loadPosts函数没正确接收刷新时传入的page参数：你在onRefresh里调用loadPosts(0)，但函数内部还是用全局的page变量，传入的参数根本没生效。
2. 刷新时没重置posts数组：setPosts([...posts,...response.data])始终是追加数据，刷新场景下应该直接替换成第0页的新数据，而不是合并。
3. refreshing状态没正确收尾：你开启了刷新状态，但刷新完成（不管成功失败）都没把它设回false，会导致刷新指示器一直转。
4. setPage的异步特性踩坑：onRefresh里先调用loadPosts(0)再setPage(0)，但setPage是异步的，此时loadPosts用的还是原来的page值，逻辑顺序错了。

解决方案 #

咱们逐个修复这些问题：

1. 改造loadPosts函数，支持区分刷新/加载更多 #

让函数可以接收目标页码和刷新标记，根据场景决定是替换还是追加数据：

const loadPosts = async (targetPage = page, isRefresh = false) => { 
  setLoading(true); 
  const response = await postsApi.getPosts(targetPage); 
  setLoading(false); 
  if (!response.ok) {
    setError(true);
    // 刷新失败也要关闭刷新状态
    if (isRefresh) setRefreshing(false);
    return;
  }
  setError(false);
  if (isRefresh) {
    // 刷新时直接替换为第0页数据
    setPosts(response.data);
    // 刷新完成关闭状态
    setRefreshing(false);
  } else {
    // 加载更多时追加数据，用函数式更新避免异步状态问题
    setPosts(prevPosts => [...prevPosts, ...response.data]);
  }
}; 

2. 修正下拉刷新的逻辑顺序 #

先把页码重置为0，再调用带刷新标记的loadPosts：

onRefresh={() => { 
  setPage(0);
  loadPosts(0, true); 
}}

3. 优化加载更多的页码更新 #

用函数式更新获取最新页码，避免异步状态带来的错误：

const handleLoadMore = () => { 
  console.log('loadmore') 
  setPage(prevPage => prevPage + 1); 
}; 

完整修改后的代码 #

function PostsScreen({ navigation }) { 
  const [posts, setPosts] = useState([]); 
  const [error, setError] = useState(false); 
  const [loading, setLoading] = useState(false); 
  const [page, setPage] = useState(0); 
  const [refreshing, setRefreshing] = useState(false); 

  const loadPosts = async (targetPage = page, isRefresh = false) => { 
    setLoading(true); 
    const response = await postsApi.getPosts(targetPage); 
    setLoading(false); 
    if (!response.ok) {
      setError(true);
      if (isRefresh) setRefreshing(false);
      return;
    }
    setError(false);
    if (isRefresh) {
      setPosts(response.data);
      setRefreshing(false);
    } else {
      setPosts(prevPosts => [...prevPosts, ...response.data]);
    }
  }; 

  useEffect(() => { 
    loadPosts(page); 
  }, [page]); 

  const handleLoadMore = () => { 
    console.log('loadmore') 
    setPage(prevPage => prevPage + 1); 
  }; 

  return ( 
    <> 
      <ActivityIndicator visible={loading} /> 
      <Screen style={styles.screen}> 
        <FlatList 
          data={posts} 
          keyExtractor={(post) => post.id.toString()} 
          renderItem={({ item, index }) => ( 
            <Card 
              title={item.title} 
              subTitle={item.subTitle} 
              onPress={() => navigation.navigate(routes.POST_DETAILS, {post: item, index})} 
            /> 
          )} 
          refreshing={refreshing} 
          onRefresh={() => { 
            setPage(0);
            loadPosts(0, true); 
          }} 
          onEndReached={handleLoadMore} 
          onEndReachedThreshold={0} 
          initialNumToRender={10} 
        /> 
      </Screen> 
    </> 
  ); 
}

这样修改后，下拉刷新就会正确加载第0页的数据并替换现有列表，不会再出现重复ID的问题啦！

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