react-native - 使用 onViewableItemsChanged 反应原生 FlatList 的意外行为

Question

我正在尝试使用功能组件实现 FlatList onViewableItemsChanged。我想在用户滚动时更改状态。最初，我写了这个

 const [activeAlphabet,setAlphabet] = useState(0)
    const onViewableItemsChanged =(viewableItems)=> {
            setActiveAlphabet(viewableItems.viewableItems[0].index)
        }
    const viewConfigRef = { viewAreaCoveragePercentThreshold: 50 }
    <FlatList
        keyExtractor={(item, index) => index.toString()}
        data={Object.entries(cat)}
        onViewableItemsChanged={viewableItems => onViewableItemsChanged(viewableItems)}
        viewabilityConfig={viewConfigRef}
        renderItem={({ item,index }) =>.......}
        />

但我遇到了一个错误

不变违规：不支持动态更改 onViewableItemsChanged

任何状态更改时的 FlatList ScrollView 错误 - 不变量违规：不支持动态更改 onViewableItemsChanged

这个答案建议使用 useRef 来解决这个问题所以，我把代码改成了这个。

const [activeAlphabet,setActiveAlphabet] = useState(0)
   const onViewableItemsChanged =useRef((viewableItems)=> {
        setActiveAlphabet(viewableItems.viewableItems[0].index)
    })
    console.log(onViewableItemsChanged)
    const viewConfigRef = useRef({ viewAreaCoveragePercentThreshold: 50 })
    <FlatList
        keyExtractor={(item, index) => index.toString()}
        data={Object.entries(cat)}
        onViewableItemsChanged={onViewableItemsChanged.current}
        viewabilityConfig={viewConfigRef.current}
        renderItem={({ item,index }) =>.......}
        />

但现在的问题是

setActiveAlphabet(viewableItems.viewableItems[0].index)

不工作，它没有效果。