ReactJS状態配列の更新と並べ替え

bugfix> javascript > 投稿 2020-08-22 18:25

私はES6の初心者であるReactJSなので、知識不足を許します。機内でアドバイスをさせていただきます。地図上にピンを配置するReactJSプロジェクトを作成し、クリックするとそのピンに関連するビデオが表示されます。 WordPressを使用していますが、投稿とビデオの2種類の投稿があります。場所には複数のビデオを含めることができ、高度なカスタムフィールドリピーターフィールドを介して接続されます。

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

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

bugfix

ReactJS状態配列の更新と並べ替え

javascript

reactjs

ecmascript-6

関連記事