Question

我正在构建一个使用Dark Sky weather API的React应用。我正在尝试获取一个月的天气数据。然后，我尝试遍历每天的每个小时，以查看天气是否低于62度或高于75度。如果确实如此，它将为每个范围增加一个计数器。我设法使总时间降到62以下或75以下。但是我也试图获取每一天的总时间，所以我不知道怎么做。我最初的想法是使用getDailyData（）方法将每天的数据推入状态。但是，当我通过控制台记录日志heatingData或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不会以毫秒为单位返回正确的时间，因此我需要解决该问题。我想你会明白为什么...

这是一个代码endbox链接，您可以在其中找到解决方案：https://codesandbox.io/s/0393374vqn

我正在尝试从API获取一个月的天气数据

1 个答案: