Блог

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

Допустим, у меня есть массив из 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, в переменные объекта состояния.

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