Установка объекта состояния динамически с использованием данных, возвращаемых с помощью Promise.all и API выборки: React + Typescript

Question

Я использую API выборки и обещание. Для сценария, в котором я передаю массив URL-адресов, откуда я получаю данные. Данные, извлеченные из всех вышеупомянутых URL, должны быть установлены в объект состояния.

Скажем, у меня есть массив из 5 URL, результат которого должен быть возвращен присваивается 5 различных значений внутри моего объекта состояния.

Использование React вместе с машинописью.

Помощь будет оценена.

Это то, что я пробовал до сих пор

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

Необходимо установить данные, возвращаемые из обещания, в переменные объекта состояния.

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