Reactjs React Native FlatList onViewableItemsChanged回调在状态更改后遇到错误重新加载

我需要设置状态以检测当前视口中的哪个项目可见。为此，我编写了以下代码：

const [inViewPort, setInViewPort] = useState(0);

const viewabilityConfig = {
  viewAreaCoveragePercentThreshold: 30,
};

const onViewableItemsChanged = ({viewableItems, changed}) => {
  if (changed && changed.length > 0) {
    setInViewPort(changed[0].index);
  }
};

return (
  <SafeAreaView style={styles.container}>
    <FlatList
      data={myData}
      renderItem={renderItem}
      showsHorizontalScrollIndicator={false}
      keyExtractor={(_, index) => index.toString()}
      horizontal={true}
      onViewableItemsChanged={onViewableItemsChanged}
      viewabilityConfig={viewabilityConfig}
    />
  </SafeAreaView>
);

const[inViewPort，setInViewPort]=useState（0）；
常量可视性配置={
ViewArea覆盖率百分比阈值：30，
};
const onViewableItemsChanged=（{viewableItems，changed}）=>{
如果（已更改&&changed.length>0）{
setInViewPort（已更改[0]。索引）；
}
};
返回(
index.toString（）}
水平={true}
onViewableItemsChanged={onViewableItemsChanged}
viewabilityConfig={viewabilityConfig}
/>
);

onViewableItemsChanged事件回调会正确触发，但在我调用setInViewPort后，组件会更新，并重新引发以下错误：

不变冲突：不支持动态更改OnViewableItemsAnged

---

我一直在寻找相同的答案，但没有明确的例子。我就是这样解决的

const [inViewPort, setInViewPort] = useState(0)

const viewabilityConfig = useRef({
  itemVisiblePercentThreshold: 50,
  waitForInteraction: true,
  minimumViewTime: 5,
})

const onViewableItemsChanged = React.useRef(({ viewableItems, changed }) => {
  if (changed && changed.length > 0) {
    setInViewPort(changed[0].index);
  }
})

return (
  <SafeAreaView style={styles.container}>
    <FlatList
      data={myData}
      renderItem={renderItem}
      showsHorizontalScrollIndicator={false}
      keyExtractor={(_, index) => index.toString()}
      horizontal={true}
      onViewableItemsChanged={onViewableItemsChanged.current}
      viewabilityConfig={viewabilityConfig.current}
    />
  </SafeAreaView>
)

const[inViewPort，setInViewPort]=useState（0）
const viewabilityConfig=useRef({
itemVisiblePercentThreshold:50，
waitForInteraction：是的，
最小查看时间：5，
})
const onViewableItemsChanged=React.useRef（{viewableItems，changed}）=>{
如果（已更改&&changed.length>0）{
setInViewPort（已更改[0]。索引）；
}
})
返回(
index.toString（）}
水平={true}
onViewableItemsChanged={onViewableItemsChanged.current}
viewabilityConfig={viewabilityConfig.current}
/>
)

我一直在寻找相同的答案，但没有明确的例子。我就是这样解决的

const [inViewPort, setInViewPort] = useState(0)

const viewabilityConfig = useRef({
  itemVisiblePercentThreshold: 50,
  waitForInteraction: true,
  minimumViewTime: 5,
})

const onViewableItemsChanged = React.useRef(({ viewableItems, changed }) => {
  if (changed && changed.length > 0) {
    setInViewPort(changed[0].index);
  }
})

return (
  <SafeAreaView style={styles.container}>
    <FlatList
      data={myData}
      renderItem={renderItem}
      showsHorizontalScrollIndicator={false}
      keyExtractor={(_, index) => index.toString()}
      horizontal={true}
      onViewableItemsChanged={onViewableItemsChanged.current}
      viewabilityConfig={viewabilityConfig.current}
    />
  </SafeAreaView>
)

const[inViewPort，setInViewPort]=useState（0）
const viewabilityConfig=useRef({
itemVisiblePercentThreshold:50，
waitForInteraction：是的，
最小查看时间：5，
})
const onViewableItemsChanged=React.useRef（{viewableItems，changed}）=>{
如果（已更改&&changed.length>0）{
setInViewPort（已更改[0]。索引）；
}
})
返回(
index.toString（）}
水平={true}
onViewableItemsChanged={onViewableItemsChanged.current}
viewabilityConfig={viewabilityConfig.current}
/>
)

这是否回答了您的问题？这回答了你的问题吗？