Javascript 在React组件中显示并行Ajax请求的结果

我正试图用Reactjs重写我的旧项目。由于我是一个初学者，这是我的第一个应用程序，我需要一些帮助，以了解什么是最好的方式做这件事的反应方式，以及我可以如何提高自己和这个演示项目

这是它的一部分

我希望在Ajax请求完成后立即显示一个名称，而不是在Promise中等待所有请求完成

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

'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

import React，{Component}来自“React”
从“./List”导入列表
导出类ListManager扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）
this.state={finaldata:[]}
}
组件将安装（）{
常量id=[1,2,3,4,5]
本.APIres（id）
}
APIres（ids）{
Promise.all（id.map）（id=>fetch（）http://api.tvmaze.com/shows/然后（resp=>resp.json（）.then（data=>data.name））
))。然后（数据=>{
data.sort（）
this.setState（{finaldata:Object.assign（this.state.finaldata，data）}）
})
}
渲染（）{
返回(

{this.props.title}

)
}
}

List.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 >
    )
  }
}

'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

“严格使用”
从“React”导入React，{Component}
常量ListItem=（{text}）=>
{text}
常量列表=（{data}）=>{
const listNodes=data.map（（值，索引）=>）
返回
{listNodes}
}
导出默认列表

注意：id数组将附带一个URL查询，如

example.com/#/？id=1,2,3,4

。我将使用react路由器进行此操作。

有多种方法

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序列不保证

所有回迁同时开始（出于性能原因），但数据将按请求-响应的顺序显示，这可能与ids顺序不同

  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（）

---

您需要和ids订单一样的订单吗？我想按名称排序。。id序列并不重要。3号是这样的。但我有一个小问题。如果将来获取一个id的返回名称和运行时会怎么样。我想根据运行时进行排序。@VikasKapadiya第三个示例按我知道的名称进行排序。我刚刚说过。我还想说，如果每个id都有名称和运行时，而不仅仅是名称，该怎么办。那怎么分类呢？看看这个。。我想按运行时排序