ReactコンポーネントのParallel Ajaxリクエストの結果を表示

Question

私はReactjsで私の古いプロジェクトを書き直そうとしています。私は初心者で、これは私の最初のアプリですから、私はリアクションの方法でこれを行うための最善の方法と、自分自身とこのデモプロジェクトをどのように改善できるかを理解する助けが必要です。

ここにはworking demoです。

プロミスですべてを完了するのを待つのではなく、Ajaxリクエストが完了するとすぐに名前を表示したいと思います。

ListManager.js

import React, { Component } from 'react' 
import List from './List' 

export class ListManager extends Component { 
    constructor (props, context) { 
    super(props, context) 
    this.state = {finaldata: []} 
    } 

    componentWillMount() { 
    const id = [1, 2, 3, 4, 5] 
    this.APIres(id) 
    } 

    APIres (ids) { 
    Promise.all(ids.map(id => fetch('http://api.tvmaze.com/shows/' + id).then(resp => resp.json().then(data => data.name)) 
    )).then(data => { 
     data.sort() 
     this.setState({finaldata: Object.assign(this.state.finaldata, data)}) 
    }) 
    } 

    render() { 
    return (
     < div> 
     <h3>{this.props.title}< /h3> 
     <List data={this.state.finaldata} /> 
     </div> 
    ) 
    } 
} 

List.js

'use strict' 
import React, { Component } from 'react' 

const ListItem = ({ text }) => <li>{text}</li> 

const List = ({ data }) => { 
    const listNodes = data.map((value, index) => <ListItem text={value} key={index}></ListItem>) 

    return <ul>{listNodes}</ul> 
} 
export default List 

いくつかの注意事項：ID配列はexample.com/#/?id=1,2,3,4のようなURLのクエリが付属します。私はこれに反応ルータを使用します。

Answer 1

はsequenseDEMO

すべてのフェッチは（性能の理由で）同時に開始と方法

1が存在するが、データはIDの順に表示される

APIres (ids) { 
    ids.map(id => fetch('http://api.tvmaze.com/shows/' + id).then(resp => resp.json())) 
    .reduce((sequence,promise)=> 
    sequence.then(()=>promise) 
    .then(({name})=>{ 
     this.setState({finaldata: [...this.state.finaldata, name]}); 
    }), Promise.resolve()); 
    } 

2シーケンスの保証はありませんDEMO

すべてのフェッチは（パフォーマンスの理由で）同時に開始しますが、データはIDがSETSTATE

前にソート

APIres (ids) { 
    ids.forEach(id => fetch('http://api.tvmaze.com/shows/' + id).then(resp => resp.json()) 
    .then(({name})=>{ 
     this.setState({finaldata: [...this.state.finaldata, name]}) 
    })) 
    } 

3を注文するのと同じではない可能性がある、要求応答の順で表示されます

データは、要求応答の順に表示されますが、順序はsort()

APIres (ids) { 
    ids.forEach(id => fetch('http://api.tvmaze.com/shows/' + id).then(resp => resp.json()) 
    .then(({name})=>{ 
     this.setState({finaldata: [...this.state.finaldata, name].sort()}) 
    })) 
    }