React Native上下文多useEffect优化与子分类页面报错解决

一、修复首次加载同时调用两个API的问题 #

• 彻底移除首页组件、导航配置或全局逻辑中所有fetchSubCategoryData的调用，确保该API只和SubCategoryScreen关联。
• 将fetchSubCategoryData放在SubCategoryScreen的挂载生命周期中执行，仅在组件进入视图时触发：

// SubCategoryScreen.js
import { useEffect } from 'react';

const SubCategoryScreen = () => {
  useEffect(() => {
    const loadSubCategories = async () => {
      await fetchSubCategoryData();
    };
    loadSubCategories();
  }, []); // 空依赖保证仅组件挂载时执行一次

  // 组件渲染逻辑
  return (/* ... */);
};

二、解决移至子组件后的报错问题 #

报错"Invariant Violation: TaskQueue: Error with task : Tried to get frame for out of range index NaN"，核心原因是列表渲染时使用了无效索引（NaN），按以下步骤排查修复：

• 校验API返回数据：确保fetchSubCategoryData返回的是有效数组，添加兜底处理避免空数据或格式错误：

const fetchSubCategoryData = async () => {
  try {
    const res = await fetch('你的子分类API地址');
    const rawData = await res.json();
    // 强制转为数组，避免非数组数据导致渲染异常
    const validData = Array.isArray(rawData) ? rawData : [];
    setSubCategories(validData);
  } catch (err) {
    console.error('子分类数据获取失败:', err);
    setSubCategories([]); // 出错时也设置空数组兜底
  }
};

• 修正列表key值：不要用索引作为列表项的key，改用数据自身的唯一标识（如id），避免数据为空时索引出现NaN：

// 错误写法
{subCategories.map((item, idx) => (
  <SubItem key={idx} />
))}

// 正确写法
{subCategories.map((item) => (
  <SubItem key={item.id} />
))}

• 初始化state为数组：存储子分类数据的state必须初始化为空数组，避免未初始化状态导致渲染错误：

const [subCategories, setSubCategories] = useState([]);

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