Я пытаюсь получить данные о погоде за месяц из API

Question

Я создаю приложение React, которое использует API погоды Dark Sky.Я пытаюсь получить данные о погоде за месяц.Затем я пытаюсь перебирать каждый час каждого дня, чтобы посмотреть, опустится ли погода ниже 62 градусов или выше 75. Если это произойдет, будет увеличиваться счетчик для каждого диапазона.Мне удалось получить общее количество раз, когда оно падает ниже 62 или выше 75. Но я также пытаюсь получить общее количество обоих за каждый отдельный день, и я не могу понять, как.Моя первоначальная мысль состоит в том, чтобы помещать данные из каждого дня в состояние, используя метод getDailyData ().Тем не менее, когда я регистрирую консоль журнала heatData или acData, она не содержит данных за 31 день.Он содержит несколько сотен дубликатов.Вот что я так далеко.Любая помощь будет оценена.

    import React, { Component } from 'react';
    import DisplayCount from "./components/DisplayCount"
    import axios from "axios";

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          heatingData: [],
          acData: [],
          airConditioningCount: 0,
          heatingCount: 0
        }
      }

      componentDidMount = () => {
        this.getDailyData();
      }

      getDailyData = () => {

        for (let i = 1; i <= 31; i++) {

          const proxy = `https://cors-anywhere.herokuapp.com/`;
          const apiURL = `https://api.darksky.net/forecast/8b01861d3b06ab86ba285ef08d52c88d/45.5898,-122.5951,2018-05-${[i] < 10 ? "0" + [i] : [i]}T00:00:00`;

          axios(proxy + apiURL)
            .then(response => {
              return response.data.hourly.data;
            })
            .then(res => {
              this.setState(prevState => ({
                acData: [...prevState.acData, res],
                heatingData: [...prevState.heatingData, res]
              }))
              res.forEach(id => {
              if (id.temperature > 75) {
                this.setState(prevState =>({
                    airConditioningCount: prevState.airConditioningCount + 1
                }))
              } else if (id.temperature < 62){
                this.setState(prevState =>({
                  heatingCount: prevState.heatingCount + 1
                }))
                }
              })
            })
        }
      }

      render() {
        return (
          <div className="App">
            <h1 className="title">HVAC Report</h1>
            <h3 className="subtitle">(Month of May 2018)</h3>
            <div className="display-container">
              <DisplayCount
                countTitle={"Total AC Count"}
                countTotal={this.state.airConditioningCount} />
              <DisplayCount
                countTitle={"Total Heating Count"}
                countTotal={this.state.heatingCount} />
            </div>
          </div>
        );
      }
    }

const DisplayCount = (props) => {
  return (
    <div className="display-count">
      <h2>{props.countTitle}</h2>
      <p>{props.countTotal}</p>
    </div>
  );
}


    export default App;

Answer 1

Я думаю, что сделал то, что вы хотели.Я сделал функцию, которая делает объект, который имеет ключи для каждого дня в месяце.Итак, все равно var month = { 1: {}, 2: {}, 3: {}} и так далее ... Внутри каждого предмета у вас есть клавиши выше и ниже, которые показывают, сколько раз температура поднималась выше 75 или опускалась ниже 62 в этот день.Во-вторых, используемый вами API не возвращает нужное время в миллисекундах, поэтому мне нужно было это исправить.Я думаю, вы поймете, почему ...

Это ссылка на кодовую коробку, где вы можете найти решение: https://codesandbox.io/s/0393374vqn