使用 Promise.all 和获取 API 返回的数据动态设置状态对象：React+Typescript

Question

我正在使用 fetch API 和 promise.all 来处理从我获取数据的地方传递 URL'S 数组的场景。从上面所有URL'S中取出的数据都需要设置到state对象中。

假设我有一个 5 URL 的数组，这些返回的结果必须是分配给我的状态对象中的 5 个不同值。

将 React 与 typescript 一起使用。

不胜感激。

这是我目前尝试过的方法

import * as React from 'react';

const urls = [ 'http://localhost:3001/url1',
               'http://localhost:3001/url2',
               'http://localhost:3001/url3',
             ]

interface IState {
     test: [],
     result: [],
     returnVal: []
}

export default class App extends React.Component<{},IState> {

  constructor(props:any)
  {
    super(props);
    this.state = {
       test: [],
       result: [],
       returnVal: []
  }

  checkStatus(response:any) {
    if (response.ok) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(new Error(response.statusText));
    }
  }

  parseJSON(response:any) {
    return response.json();
  }

  setData(data:any){
    Object.entries(this.state).forEach(([key], index) => {
      this.setState({ [key]: data[index] })
    });
  }

  componentDidMount()
  {
    Promise.all(urls.map(url =>
          fetch(url)
            .then(this.checkStatus)                 
            .then(this.parseJSON)
            .catch(error => console.log('There was a problem!', error))
        ))
        .then(data => {
           this.setData(data);
        })
  }

  render() {  
    return(
      //some rendering code
    )
  }
}

需要将promise返回的数据设置到状态对象变量中。

Answer 1

Promise.all(urls.map(url =>
      fetch(url)
        .then(this.checkStatus)                 
        .then(this.parseJSON)
 ))
 .then(jsons => {
    var newState = {};
    var index = 0;
    for(var key in this.state)
       newState[key] = jsons[index++];        
    this.setState(newState);
})

使用 Promise.all 和获取 API 返回的数据动态设置状态对象：React+Typescript

Setting state object dynamically using the data returned using Promise.all and fetch API : React+Typescript

fetch

promise

setstate

typescript

reactjs