ReactNative FlatList scrollToIndex问题

Question

我的App.js中有以下代码：

主flatListRef的

1. 主FlatList的ref在useEffect钩子中设置为

const [flatListRef, setFlatListRef] = useState(null);
...
useEffect(() => {
    let mounted = true;
    if (refSlides?.current && mounted) setFlatListRef(refSlides.current);
    return () => mounted = false;
}, []);

1. ：将所需组件呈现为FlatList

的项的renderItem函数

const renderItem = ({item, index, separators}) => {
    return (
        <View style={{
            flexGrow: 1,
            width,
            height
        }}>
            {
                item.component === 'Welcome' && <Welcome/>
                || item.component === 'Hospital' &&
                <Hospital
                    flatListRef={flatListRef}
                    history={navHistory}
                    slides={slides}
                    setSlides={setSlides}
                    slide={item}/>
                || item.component === 'Snippets' &&
                <Snippets
                    flatListRef={flatListRef}
                    history={navHistory}
                    slides={slides}
                    setSlides={setSlides}
                    slide={item}
                />
                || item.component === 'Disease' &&
                <Disease
                    flatListRef={flatListRef}
                    history={navHistory}
                    slides={slides}
                    setSlides={setSlides}
                    slide={item}
                />
            }
        </View>
    );
};

1. 实际的FlatList定义

<FlatList
    data={slides}
    ref={refSlides}
    keyExtractor={item => item.key.toString()}
    renderItem={renderItem}
    getItemLayout={(data, index) => {
        return {
            length: width,
            offset: width * index,
            index
        };
    }}
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    pagingEnabled={true}
/>

我的Welcome、Hospital、Snippets、Disease组件中都有以下代码。例如：

<TouchableOpacity
    activeOpacity={0.8}
    onPress={() => {
        setSlides([...slides, {
            key: uuidC.v4(),
            index: slides.length,
            uuid: item.uuid,
            component: 'Hospital'
        }]);
        flatListRef.scrollToIndex({index: slides.length - 1}); // <===== HERE IS THE PROBLEM
    }}>
    ...
</TouchableOpacity>

我有一个主FlatList，它在开头有2个组件，在索引0处有Welcome组件，在索引1处有Hospital组件。在Hospital组件中，我有按钮，当按下按钮时，将另一个项(Hospital、Disease、Snippets)添加到FlatList中。项目添加成功，我可以手动滑到它们。

当我试图自动滚动到添加的最后一项时，问题就出现了。我想要下面的行为:按钮按下后，一个新的项目被添加到FlatList和自动滚动到它。此外，我希望滚动到当前FlatList中的任何索引。

我得到的错误是：scrollToIndex out of range: requested index 2 but maximum is 1。

为什么它说，maximum is 1当我用我的眼睛看到至少3个项目在FlatList。

已经在这里呆了两天了，没有发现任何有用的东西。此外，我还没有找到从FlatLists中添加或删除与scrollToIndex使用相关的项目的示例。尝试使用VirtualizedLists，问题与FlatList相同。我怀疑这是一个ref问题。我不明白为什么FlatList不更新它呈现的数据的长度，所以我可以滚动到它。

如有任何建议，敬请见谅。

Answer 1

更新flatListRef.scrollToIndex({index: I18nManager.isRTL ? array.length - index - 1 : index});，其中索引来自Flatlist renderItem