React Native FlatList每3行插入广告 调用API数据报item[0].type未定义

• 初始渲染空数据报错：你初始化DataForCategory是空数组，组件首次渲染时会直接调用modifyData([])，该函数最后会执行arr.push(tmp)，此时tmp是空数组，最终返回[[]]。渲染时拿到的item是空数组，item[0]为undefined，访问type属性就会抛出对应错误。你用本地模拟数据时是初始化就有值，首次渲染就有合法数据，所以不会触发该问题，而接口请求是异步的，首次渲染必然走空数据逻辑。
• 边界逻辑漏洞：modifyData函数的分组逻辑顺序存在问题，当索引同时满足index%3==0和index%9==0时（比如索引为9），两次清空tmp可能会生成空数组项；另外如果接口返回的数据长度不足3条，也会产生空数组项。
• 接口数据结构不匹配：不排除接口返回的response.data不是预期的数组结构，比如真实数据嵌套在response.data.data下，导致传入modifyData的参数不是合法数组。

• 加空值防护：在renderItem中访问item[0].type前增加非空判断，使用可选链简化写法：

if (item?.[0]?.type == 'banner') {
  // 渲染广告逻辑
}

如果你的运行环境不支持可选链，可以换成传统判断：

if (Array.isArray(item) && item.length > 0 && item[0].type == 'banner') {
  // 渲染广告逻辑
}

• 修复初始空数据问题：
  方案1：在FlatList外层加判断，只有数据不为空时才渲染：

  {DataForCategory.length > 0 && (
    <FlatList
      data={modifyData(DataForCategory)}
      renderItem={({item, index}) => renderItem(item, index)}
      keyExtractor={(item, index) => index.toString()}
    />
  )}
  

  方案2：修改modifyData函数，传入空数组时直接返回空数组，同时最后push tmp前判断是否有值，调整分组逻辑顺序避免生成空项：

  const modifyData = (data) => {
    if (!Array.isArray(data) || data.length === 0) return []
    const numColumns = 3;
    const addBannerIndex = 9;
    const arr = [];
    var tmp = [];
    data.forEach((val, index) => {
      if (index % addBannerIndex == 0 && index != 0) {
        if (tmp.length > 0) arr.push(tmp);
        arr.push([{type: 'banner'}]);
        tmp = [];
      } else if (index % numColumns == 0 && index != 0) {
        arr.push(tmp);
        tmp = [];
      }
      tmp.push(val);
    });
    if (tmp.length > 0) arr.push(tmp);
    return arr;
  };
  

• 确认接口数据结构：打印response.data确认结构和本地模拟数据一致，确保是同结构的数组。

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