Почему мои данные возвращаются в случайном порядке, как я могу сделать это правильно?

Question

Я делаю pokedex в React, используя PokeAPI. Идея состоит в том, чтобы сделать их похожими на карты покемонов. Все работает, но данные не всегда возвращаются в правильном порядке (то есть иногда на оборотной стороне карты Charizards, карты с лицевой стороной Bulbasaurs). Разве это не должно всегда отображаться правильно, так как второй вызов идет в обещании?

class Cardcontainer extends Component {
state= {
    pokemon: [],
    cardBack: []
}

componentDidMount() {
       fetch('https://pokeapi.co/api/v2/pokemon')
       .then(res => res.json())
       .then(res=> {
        this.setState({
            pokemon: [...res.results]
        })
       })
       .then(res=> {
           this.state.pokemon.forEach((poke)=> {
               fetch(poke.url)
               .then(res => res.json())
               .then(res => {
                   this.setState({
                       cardBack: [...this.state.cardBack, 
res]
                   })
               })
           })
       })

}

Answer 1

Если предположить, что вы запрашиваете вызовы на номер this.setState({cardBack: ...}) в том порядке, в котором вы совершили вызовы fetch(), то вы можете сделать это, собрав все результаты fetch() в Promise.all(). , Это запустит их все параллельно, но соберет все результаты по порядку. Затем, когда все это будет сделано, вы можете позвонить this.setState() по каждому результату в том порядке, в котором вы отправили fetch() запросов:

class Cardcontainer extends Component {
state= {
    pokemon: [],
    cardBack: []
}

componentDidMount() {
   fetch('https://pokeapi.co/api/v2/pokemon')
   .then(res => res.json())
   .then(res=> {
        this.setState({pokemon: [...res.results]});
        return Promise.all(this.state.pokemon.map(poke=> {
           return fetch(poke.url).then(res => res.json())
        }));
   }).then(results => {
       // process all the results in order
       results.forEach(res => {
           this.setState({
               cardBack: [...this.state.cardBack, res]
           })
       })
   });
}

Если это не то, о чем вы просите, пожалуйста, отредактируйте свой вопрос, чтобы сделать запрос более понятным.

Answer 2

При втором получении вы можете использовать ключевое слово await. Было бы что-то вроде:

this.state.pokemon.forEach(async (poke)=> {
    let fetchResult = await fetch(poke.url);
    let data = await fetchResult.json();
    this.setState({cardBack: [...this.state.cardBack, data]});
};