Реагировать js заполнить карту, используя топор ios внутри цикла for - PullRequest
Новая
       4

Реагировать js заполнить карту, используя топор ios внутри цикла for

0 голосов
/ 15 марта 2020

Я пытаюсь визуализировать линейный график (используя canvas js) в проекте реагирования Js, поэтому я получаю данные с помощью запроса ax ios get и зацикливаю этот запрос для заполнения переменной данных это используется в качестве входных данных для графика, но моя проблема в том, что топор ios, кажется, заполняет мои данные случайным образом

Это мой код внутри componentdidmount(): 

     constructor(props) {
    super(props);

    this.state = {
      data: [] ,

    };
  }
       componentDidMount(){
    let responses = []
    for (let i = 0; i < 8; i++) {
      responses.push(axios.get("http://localhost:5000/transfer/getUsesByDay/"+i).then(res =>{
          return res.data
      }))
    }
      Promise.all(responses).then(results => {
    console.log(results)
    this.setState(prevState => {
      return {

            data: [...prevState.data, ...results.map(r => r)]


         };
        })
      }
      )

И это функция рендеринга: 

    render() {
    const { data: chartData } = this.state;
    const { classes } = this.props;
    {console.log(chartData)}
    return (
      <Paper>
        <Chart
          data={chartData}
          className={classes.chart}
        >

Теперь, когда я выполняю, я получаю этот результат (console.log (results)): 

0: {year: "15", utilisation: 3}
1: {year: "12", utilisation: 0}
2: {year: "12", utilisation: 0}
3: {year: "09", utilisation: 1}
4: {year: "08", utilisation: 1}
5: {year: "10", utilisation: 5}
6: {year: "09", utilisation: 1}
7: {year: "10", utilisation: 0}

И затем, когда я повторно выполняю получить другой результат, подобный этому: 

0: {year: "11", utilisation: 3}
1: {year: "10", utilisation: 0}
2: {year: "10", utilisation: 0}
3: {year: "09", utilisation: 1}
4: {year: "09", utilisation: 1}
5: {year: "09", utilisation: 5}
6: {year: "08", utilisation: 1}
7: {year: "08", utilisation: 0}

И результат должен быть упорядочен следующим образом: 

0: {year: "14", utilisation: 3} // the result of http://localhost:5000/transfer/getUsesByDay/"+i when i == 0 , and so on
1: {year: "13", utilisation: 0}
2: {year: "12", utilisation: 0}
3: {year: "11", utilisation: 1}
4: {year: "10", utilisation: 1}
5: {year: "09", utilisation: 5}
6: {year: "08", utilisation: 1}
7: {year: "07", utilisation: 0}

Ответы [ 2 ]

0 голосов
/ 15 марта 2020

В вашей проблеме вы написали, что делаете 

console.log(res.data)

, но этого не видно в вашем коде. Догадываясь, я вижу, что вы использовали имя переменной res в 

then(res =>{
      return res.data
 })

, если бы вы сделали console.log в приведенном выше операторе, это будет зависеть только от ответа на каждый вызов и порядка вывода может быть случайным каждый раз.

0 голосов
/ 15 марта 2020

Некоторые из ваших ответов были получены позже, даже если они были запрошены в первую очередь, потому что что-то произошло на inte rnet (данные были потеряны, и пришлось отправлять снова, et c)

...