Question

我是ES6的新手，ReactJS，所以请原谅我缺乏知识。我会在船上接受任何建议。我创建了一个ReactJS项目，它将引脚放在地图上，点击后会显示与该引脚相关的视频。我正在使用WordPress，有两种不同的帖子类型，地方和视频。地点可以有多个视频，并通过高级自定义字段转发器字段进行连接。

我正在使用WordPress API查询地点。它返回位置数据以及连接的视频数据及其所在的顺序。接下来，我遍历视频ID并获取更多数据并添加到状态源数组。由于请求是异步的，数据不按我请求的顺序返回，因此视频数据的顺序不正确。有没有办法让状态数组按所需顺序存储数据？

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);
            });
        })
    }

Answer 1

使用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);
  });

ReactJS更新状态数组并重新排序

1 个答案: