onEndReached在渲染上多次调用

Question

在下面的小型测试应用中，onEndReached被多次调用，而无需滚动。

export default function App() {
  const [state, setState] = useState([ //just a series of "random" to fill up the screen ]);
  let i = 0;
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      
      <FlatList
    inverted
    onEndReached={() => {
      let stateCopy = [...state];
      stateCopy.push("extra");
      setState(stateCopy);
    }
    }
    data={state}
    keyExtractor={item => i=i+1}
    renderItem={({ item }) => {
    return (
        <Text>{item}</Text>
    );
    }}
/>
    </View>
  );
}

我尝试做https://stackoverflow.com/a/60666252/10228836中描述的操作，但是那里的解决方案不起作用。我该如何解决？

Answer 1

添加onEndReachedThreshold={0.001}或任何其他十进制数字可以解决此问题。