React Native切换卡组时重置卡片索引避免越界问题

问题场景 #

我开发了一个包含多个卡组的React Native应用，每个卡组的卡片数量不同。点击卡组时通过selectedItem状态将卡组内容传递给子组件Cards，在子组件中使用FlatList渲染卡片。

当在Deck1（23张卡片）翻到索引15之后的位置，再切换到Deck2（15张卡片）时，会出现索引越界错误。需求是切换卡组时自动将卡片索引重置为0，且不能统一所有卡组的卡片数量（后续要支持用户自定义卡组功能）。

解决方案 #

问题根源在于切换卡组时，Cards组件的index状态保留了之前卡组的索引值，当该索引超过新卡组的最大索引时，scrollToIndex就会触发越界错误。我们需要监听卡组切换事件，强制重置索引为0。

修改Cards组件的核心逻辑 #

1. 调整useEffect，监听selectedItem变化，切换卡组时直接重置索引为0并滚动到第一张卡片
2. 修正onScrollToIndexFailed的参数错误，确保异常时能正确重置索引

修改后的Cards组件关键代码如下：

const Cards = ({selectedItem, deckIndex}) => {
  const {theme} = useContext(ThemeContext)
  let activeColors = colors[theme.mode]

  const [index, setIndex] = useState(0);
  const [lastIndex, setLastIndex] = useState(null);
  const [viewPosition, setViewPosition] = useState(0.5);

  const flatlistRef = useRef(null)

  // 监听卡组切换，重置索引
  useEffect(() => {
    if (!selectedItem) return;
    
    // 切换卡组时强制将索引重置为0
    setIndex(0);
    const newLastIndex = selectedItem.questions.length - 1;
    setLastIndex(newLastIndex);

    flatlistRef.current?.scrollToIndex({
      index: 0, 
      animated: true,
      viewPosition: 0.5,
    })
  }, [selectedItem])

  // 监听索引变化，滚动到对应位置
  useEffect(() => {
    if (!selectedItem) return;
    
    flatlistRef.current?.scrollToIndex({
      index: index, 
      animated: true,
      viewPosition,
    })
  }, [index, viewPosition, selectedItem])

  if (!selectedItem) {
    return null;
  }
  return (
    <View style={[styles.container]}>
      <Animated.FlatList
        data={selectedItem.questions}   
        ref={flatlistRef}
        keyExtractor={(item, index) => index.toString()}
        initialScrollIndex={0}
        horizontal
        showsHorizontalScrollIndicator={false}
        snapToInterval={ITEM_SIZE} // 修正：这里应该是变量而非字符串
        decelerationRate={0}
        bounces={false}
        scrollEventThrottle={16}
        initialNumToRender={10} 
        onScrollToIndexFailed={(info) => {
            setIndex(0);
            const wait = new Promise(resolve => setTimeout(resolve, 0));
            wait.then(() => {
              flatlistRef.current?.scrollToIndex({ index: 0, animated: true });
            });
          }}
        renderItem={({item, index}) => <Card info={item} index={index} totalLength={lastIndex} seefront={true} />}
      />
      {/* 底部按钮组代码保持不变 */}
    </View>
  )
}

额外优化点 #

• 修正了Animated.FlatList中snapToInterval="ITEM_SIZE"的错误，将字符串改为变量ITEM_SIZE
• 拆分了useEffect的职责，让卡组切换和索引变化的逻辑分离，避免不必要的重复触发

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