React Native分页拉取数据触发TypeError渲染错误排查

• 核心触发点：展开运算符...只能操作可迭代对象（比如数组），当接口返回异常、或者请求到最后一页无数据时，json.results为undefined，执行[...prev, ...json.results]就会抛出你看到的Symbol.iterator类型错误。
• 初始请求页码错误：你设置的count初始值为1，首次请求拼接的是page=${count+1}也就是page=2，直接跳过了第一页数据，不符合你预期的首次拉取page=1的需求。
• 状态逻辑隐患：
  • 没有定义loading状态就直接调用setLoading(false)，本身也会触发引用错误
  • 直接在请求里用闭包取count值更新页码，很容易因为闭包旧值导致页码错乱、重复请求
  • 没有做终止判断，请求到最后一页（接口返回next为null）时还会继续发无效请求

直接替换成下面的可运行逻辑：

const Blog = () => {
  const [data, setData] = useState([]);
  // 初始页码设为0，首次请求自增后就是1，符合预期
  const [page, setPage] = useState(0);
  const [loading, setLoading] = useState(false);
  // 标记是否还有下一页，避免无效请求
  const [hasNext, setHasNext] = useState(true);

  const getBlogs = async () => {
    if (loading || !hasNext) return;
    setLoading(true);
    try {
      const nextPage = page + 1;
      const response = await fetch(
        `https://..../blog-api/?page=${nextPage}`
      );
      const json = await response.json();
      // 兼容results不存在的异常场景，给兜底空数组
      const newResults = json.results || [];
      setData((prev) => [...prev, ...newResults]);
      setPage(nextPage);
      // 接口返回next为null就说明没有下一页了，终止后续拉取
      setHasNext(!!json.next);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    getBlogs();
  }, []);

  return (
    <FlatList
      data={data}
      keyExtractor={({ id }, index) => id}
      // 滚动到底部自动加载下一页
      onEndReached={getBlogs}
      onEndReachedThreshold={0.2}
      renderItem={({ item }) => (/* 你的原有渲染逻辑 */)}
    />
  )
}

• 给json.results加了空数组兜底，哪怕接口返回异常结构也不会触发展开语法的迭代器错误
• 调整了初始页码逻辑，首次请求默认拉取page=1的数据，符合你的预期
• 补全了缺失的loading状态定义，加了请求锁避免重复发请求
• 增加了hasNext终止判断，拉完最后一页后不会再发无效请求
• 把页码更新逻辑做了闭包兼容，避免React闭包导致的页码错乱问题
• 给FlatList加了onEndReached触发逻辑，滚动到底部自动加载下一页，实现真正的分页拉取效果

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