Несколько раз вызывается функция onEndReached в FlatList

Question

В моем коде впервые метод loadAlbums работает правильно. Почему я прокручиваю вниз retrieveMore вызовы функций несколько раз.

const PAGE_SIZE = 15;
const App = () => {

  const [albums, setAlbums] = useState([]);
  const [page, setPage] = useState(1);

  const loadAlbums = async () => {
    const response = await axios.get(`http://xxx:3000/posts/${PAGE_SIZE}/${page}`);
    setAlbums([...albums, ...response.data]);
    setPage(page + 1)
  }

  useEffect(() => {
    loadAlbums();
  }, [])



  const renderRowItem = ({ item }) => {
    return (
      <View style={styles.item}>
        <Text>{item.id}</Text>
        <Text>{item.body}</Text>
      </View>
    )
  }

  const retrieveMore = useCallback(() => {
    loadAlbums(); //  this line calls several times
  })

  return (
    <View style={styles.screen}>
      <FlatList
        data={albums}
        renderItem={renderRowItem}
        keyExtractor={(item, index) => index.toString()}
        onEndReached={retrieveMore}
        onEndReachedThreshold={0.5}
      />
    </View>
  )
}

Answer 1

Просто уменьшите порог

onEndReachedThreshold = {0,5} до onEndReachedThreshold = {0,2}

В настоящее время то, что происходит здесь каждый раз, когда вы достигаете 50 % экрана, на котором будет вызываться API.