onEndReached сработал до завершения загрузки данных

Question

Я пытаюсь создать PokemonList с pokeapi.co И я сначала извлекаю / pokemon /, чтобы получить список / pokemon / {pokemonName}, а затем повторяю его, чтобы получить подробную информацию о моем источнике данных, так как / pokemon / предоставляет только имя

fetchData(){
  fetch(this.state.urlState)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          urlState: responseJson.next,
          totalPokemon: responseJson.count
        });
        for (
          let i = 0, p = Promise.resolve();
          i < responseJson.results.length;
          i++
        ) {
          p = p.then(
            _ =>
              new Promise(resolve => {
                fetch(
                  "https://pokeapi.co/api/v2/pokemon/" +
                    responseJson.results[i].name
                )
                  .then(response => response.json())
                  .then(responseJson => {
                    newData = this.state.dataSource;
                    newData.push({
                      id: responseJson.id,
                      name: responseJson.name,
                      sprite: responseJson.sprites.front_default
                    });
                    this.setState({
                      totalFetchedData: this.state.totalFetchedData + 1,
                      dataSource: newData
                    });
                    resolve();
                  });
              })
          );
        }
      })
      .catch(error => {
        console.error(error);
      });
}

Это моя функция fetchData

<FlatList
  data={this.state.dataSource}
  onEndReached={() => this.fetchData()}
  onEndReachedThreshold={0.5}
  renderItem={({ item }) => {
    return (
    <View>
      <Text>
        {pokeNumber} - {item.name}
      </Text>
    </View>
    );
  }}
  extraData={this.state}
/>

Это мой компонент FlatList, я подумал, что onEndReached сработал, потому что в списке нет элементов, поэтому он сработал onEndReached, даже если первая загрузка еще не завершена. Есть ли какое-нибудь решение для onEndReached, что он должен ждать, пока мои fetchData завершат сначала, прежде чем он получит другой.

Answer 1

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *1004* * * *все, что вы можете сделать, это следовать решению этого парня на Github, который использует onMomentumScrollBegin в FlatList для предотвращения вызова без события прокрутки.

https://github.com/facebook/react-native/issues/14015#issuecomment-310675650

Второй подход ожидаетдля выборки данных с использованием таймера, такого как debounce () из lodash debounce .Но это решение может не сработать, поскольку оно зависит от Интернета и скорости обработки.