如何解决“尝试获取超出范围索引 NaN 的框架” - 反应原生平面列表？

Question

下面是使用的代码，打开此页面时会出现“尝试获取超出范围索引 NaN 的框架”。

我不明白我的问题出在哪里。请帮忙。

import {FlatList} from 'react-native-gesture-handler';
import {SIZES, constants} from '../../constants';
const [row1Images, setRow1Images] = React.useState({
    ...constants.walkthrough_01_01_images,
    ...constants.walkthrough_01_01_images
  })

const row1FlatListRef = React.useRef()

<FlatList
   ref={row1FlatListRef}
   decelerationRate="fast"
   horizontal
   showsHorizontalScrollIndicator={false}
   listKey="Slider1"
   keyExtractor={(_, index) => `Slider1_${index}`}
   data={row1Images}
   renderItem={({item, index}) => {
     return (
       <View style={{width: ITEM_WIDTH,alignItems: "center",justifyContent: "center"}}>
         <Image source={item} style={{width: 110,height: 110}} />
       </View>
     )
   }}
/>

Answer 1

您已将 row1Images 设置为对象，而不是数组。传递给 FlatList 的 data 属性应该是一个数组。

像这样设置 row1Images

const [row1Images, setRow1Images] = React.useState([
    ...constants.walkthrough_01_01_images,
    ...constants.walkthrough_01_01_images
  ])