React Native遇NSRangeException：空数组索引0越界异常求助

开发React Native应用时随机出现NSRangeException异常：* -[__NSArrayM objectAtIndexedSubscript:]: index 0 beyond bounds for empty array。即使注释大部分业务代码、删除相关组件，异常仍会随机触发。确认项目中唯一用到的预设数组arrData始终有数据，且仅在FlatList中使用，但问题依旧无法解决。相关代码如下：

import { FlatList, View, Text, TouchableHighlight } from "react-native";
import { useContext } from "react";
import Swipeable from "react-native-gesture-handler/Swipeable";
import { arrData } from "../../data";
import { PlayingContext } from "../../app/_layout";
import ListItem from "../ListItem/index";
import SwipeButtons from "../SwipeButtons";
import MantraListStyles from "./MantraList.styles";

const { container, list } = MantraListStyles;
const MantraList = () => {
  const changeContext = useContext(PlayingContext).setPlaying;
  const handlePress = (newPlaying) => {
    changeContext(newPlaying);
  };

  return (
    <View style={container}>
      <FlatList
        data={arrData}
        keyExtractor={(item) => item?.id}
        showsVerticalScrollIndicator={false}
        renderItem={({ item }) => (
          <Swipeable renderRightActions={() => <SwipeButtons />}>
            <TouchableHighlight
              activeOpacity={0.85}
              underlayColor="darkgrey"
              onPress={() => handlePress(item)}
            >
              <ListItem fileData={item} />
            </TouchableHighlight>
          </Swipeable>
        )}
        style={list}
      />
    </View>
  );
};

export default MantraList;

可能原因 #

1. react-native-gesture-handler的Swipeable组件内部bug：Swipeable在处理手势交互或组件复用场景时，内部维护的数组状态可能出现空数组访问，尤其在快速操作或组件频繁重渲染时触发。
2. FlatList渲染时机与数据兜底缺失：即使arrData是预设数组，若其加载逻辑存在异步性（比如从本地文件读取时的延迟），组件初始渲染阶段可能出现空数组，导致FlatList内部逻辑异常。
3. 子组件数组访问未做防护：ListItem或SwipeButtons内部可能存在直接访问数组索引的代码，未处理数组为空的情况，在特定渲染时机触发越界。
4. Context更新引发的不必要重渲染：handlePress未做缓存，每次渲染创建新函数，导致子组件频繁重渲染，增加异常触发概率。

解决方案 #

1. 修复Swipeable组件的复用问题 #

给SwipeButtons添加唯一key，避免组件复用导致的状态混乱：

<Swipeable renderRightActions={() => <SwipeButtons key={item.id} />}>

同时检查SwipeButtons内部代码，确保所有数组访问都添加可选链或非空判断，例如将arr[0]改为arr?.[0]。

2. 确保FlatList数据的非空性 #

给FlatList的data属性添加兜底逻辑，避免空数组传入：

<FlatList
  data={Array.isArray(arrData) ? arrData : []}
  // ...其他属性
/>

在组件开头添加数据校验，提前拦截空数据场景：

const MantraList = () => {
  // 新增数据校验
  if (!Array.isArray(arrData) || arrData.length === 0) {
    console.warn('arrData为空或格式错误');
    return <View style={container}><Text>暂无数据</Text></View>;
  }

  const changeContext = useContext(PlayingContext).setPlaying;
  // ...后续代码
};

3. 优化Context更新逻辑 #

用useCallback缓存handlePress函数，减少不必要的组件重渲染：

import { useContext, useCallback } from "react";

// ...
const handlePress = useCallback((newPlaying) => {
  changeContext(newPlaying);
}, [changeContext]);

4. 检查并修复子组件的数组访问 #

排查ListItem组件内部代码，确保所有数组索引访问都做非空防护，例如：

// ListItem中若存在类似代码
const firstTag = fileData.tags[0];
// 修改为
const firstTag = fileData.tags?.[0] || '';

5. 更新组件库版本 #

如果是react-native-gesture-handler的已知bug，尝试更新到最新稳定版：

npm install react-native-gesture-handler@latest
# 或使用yarn
yarn add react-native-gesture-handler@latest

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