ReactJS Обновление массива состояний и изменение порядка - PullRequest
Новая
       16

ReactJS Обновление массива состояний и изменение порядка

0 голосов
/ 25 мая 2018

Я новичок в ES6, ReactJS, так что извините за недостаток знаний.Я приму любой совет на борту.Я создал проект ReactJS, который размещает булавки на карте и при нажатии показывает видео, связанные с этим булавкой.Я использую WordPress, и есть два разных типа постов, Места и видео.Места могут иметь несколько видео и подключаться через поле повторителя Advanced Custom Fields.

Я использую WordPress API для запроса мест.Он возвращает данные о месте, а также то, какие видеоданные подключены и в каком порядке. Затем я перебираю идентификаторы видео, получаю дополнительные данные и добавляю их в массив источников состояния.Поскольку запросы асинхронные, данные не возвращаются в том порядке, в котором я их запрашиваю, поэтому видеоданные не в том порядке.Есть ли способ заставить массив состояний хранить данные в нужном порядке? 

class PlacePopup extends React.Component {
    constructor(props){
        super(props);

        this.state ={
            sources: [],
        } 

    }
        getAudioUrl = (props) => {

        this.props.audio.map((file , index) => {

            axios.get(`/wp-json/wp/v2/audio/${file.ID}`)
            .then(response => {

                this.setState({ sources: [...this.state.sources, response.data]}, function() {

                });


            })
            .catch(error => {
                console.log('Error fetching and parsing data', error);
            });
        })
    }

1 Ответ

0 голосов
/ 25 мая 2018

Использование Promise.all(): 

Promise.all(this.props.audio.map(file => axios.get(`/wp-json/wp/v2/audio/${file.ID}`))
  .then(responses => {
    this.setState({ sources: responses.map(x => x.data)}, function() {

    });
  })
  .catch(error => {
    console.log('Error fetching and parsing data', error);
  });
...