Почему я не могу получить запрос в свой URL для получения? - PullRequest
Новая
       5

Почему я не могу получить запрос в свой URL для получения?

0 голосов
/ 17 января 2020

Я работаю с 2 API, с 1-го я извлекаю широту и долготу, а затем загружаю в свой 2-й параметр API, чтобы получить данные о погоде JSON.

В части формы я использовал простой текстовый ввод для ввода названий городов, средство выбора даты, из которого я могу выбрать даты для информации о погоде, и кнопку для отправки.

В чем проблема?

  1. Когда я пытаюсь динамически получить запрос на мой 2-й URL, по какой-то причине он не работает, но когда я пытаюсь отобразить тот же this.state.lon, он правильно отображает долготу моей страницы.
  2. Раньше я думал, что это происходит из-за того, что мой объект состояния не обновляется, и я вызываю 2-й API без какого-либо значения, но это не так.
  3. Я даже пытался вызвать apicall1 () в самом конце, поэтому все сначала происходит с 1-го тогда только я могу назвать 2-го. Но та же проблема.
  4. 2-й API получает неверный запрос, потому что параметр запроса для lon и lat пуст 
import React, { Component } from "react";
import DatePicker from "react-date-picker";

class Form extends Component {
  state = {
    inputCity: "",
    lat: "",
    lon: "",
    date: new Date(),
    condition: "",
    minimumTemperature: "",
    maximumTemperature: "",
    calendar: ""
  };

  apicall() {
    let API_KEY_OPEN_WEATHER = "my api";

    let city = this.state.inputCity;

    let corsCurrent = `http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${API_KEY_OPEN_WEATHER}&units=metric`;

    fetch(corsCurrent)
      .then(results => {
        return results.json();
      })
      .then(data => {
        console.log(data);
        let lat = data.coord.lat;
        let lon = data.coord.lon;
        let condition = data.weather[0].main;
        let minimumTemperature = data.main.temp_min;
        let maximumTemperature = data.main.temp_max;
        this.setState({
          lat: lat,
          lon: lon,
          condition: condition,
          minimumTemperature: minimumTemperature,
          maximumTemperature: maximumTemperature
        });
      });
  }

  apicall1() {
    let API_KEY_OPEN_WEATHER = "my api";
    let API_KEY_DARKSKY = "my api";

    let city = this.state.inputCity;
    let lat = this.state.lat;
    let lon = this.state.lon;
    let unix = this.state.calendar;

    let corsCurrent = `http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${API_KEY_OPEN_WEATHER}&units=metric`;
    let corsHistorical = `https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/${API_KEY_DARKSKY}/${lat},${lon},1579257722?exclude=currently,flags,minutely,hourly`;
    fetch(corsHistorical)
      .then(results1 => {
        return results1.json();
      })
      .then(data1 => console.log(data1));
  }

  onChange = date => {
    this.setState({ date });
    console.log("changed");
  };

  handleSubmit = e => {
    console.log("submit");
    e.preventDefault();

    this.apicall();

    let year = this.state.date.getFullYear();
    let month = this.state.date.getMonth() + 1;
    let date = this.state.date.getDate();

    let calendarr = year + "," + " " + month + "," + " " + date;
    this.setState({
      calendar: calendarr
    });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            onChange={e => this.setState({ inputCity: e.target.value })}
            type="text"
            placeholder="Enter City Name"
            required
          />

          <button type="submit">Submit</button>
        </form>

        <DatePicker onChange={this.onChange} value={this.state.date} />

        <p>{this.state.lat}</p>
        <p>{this.state.lon}</p>
        <p>{this.state.condition}</p>
        <p>{this.state.minimumTemperature}</p>
        <p>{this.state.maximumTemperature}</p>
        <p>{new Date(this.state.calendar).getTime()}</p>
      </div>
    );
  }
}

export default Form;

Ответы [ 2 ]

0 голосов
/ 17 января 2020

Если вы хотите вызвать 2-й вызов API после 1-го и только в этом порядке, вам потребуется asynchronous подход.

Вы можете использовать async await.

Создайте асинхронную функцию c, и внутри нее используйте await для первого вызова, затем вызовите второй.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

0 голосов
/ 17 января 2020

Я заметил, что вам не хватает конструктора для вашего компонента. Я также добавил CORS в ваши выборки, потому что ваш запрос API направляется в другой домен. 

import React, { Component } from "react";
import DatePicker from "react-date-picker";

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputCity: "",
      lat: "",
      lon: "",
      date: new Date(),
      condition: "",
      minimumTemperature: "",
      maximumTemperature: "",
      calendar: ""
    };
  }

  apicall() {
    let API_KEY_OPEN_WEATHER = "my api";

    let city = this.state.inputCity;

    let corsCurrent = `http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${API_KEY_OPEN_WEATHER}&units=metric`;

    fetch(corsCurrent, { mode: "cors" })
      .then(results => {
        return results.json();
      })
      .then(data => {
        console.log(data);
        let lat = data.coord.lat;
        let lon = data.coord.lon;
        let condition = data.weather[0].main;
        let minimumTemperature = data.main.temp_min;
        let maximumTemperature = data.main.temp_max;
        this.setState({
          lat: lat,
          lon: lon,
          condition: condition,
          minimumTemperature: minimumTemperature,
          maximumTemperature: maximumTemperature
        });
      });
  }

  apicall1() {
    let API_KEY_OPEN_WEATHER = "my api";
    let API_KEY_DARKSKY = "my api";

    let city = this.state.inputCity;
    let lat = this.state.lat;
    let lon = this.state.lon;
    let unix = this.state.calendar;

    let corsCurrent = `http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${API_KEY_OPEN_WEATHER}&units=metric`;
    let corsHistorical = `https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/${API_KEY_DARKSKY}/${lat},${lon},1579257722?exclude=currently,flags,minutely,hourly`;
    fetch(corsHistorical, { mode: "cors" })
      .then(results1 => {
        return results1.json();
      })
      .then(data1 => console.log(data1));
  }

  onChange = date => {
    this.setState({ date });
    console.log("changed");
  };

  handleSubmit = e => {
    console.log("submit");
    e.preventDefault();

    this.apicall();

    let year = this.state.date.getFullYear();
    let month = this.state.date.getMonth() + 1;
    let date = this.state.date.getDate();

    let calendarr = year + "," + " " + month + "," + " " + date;
    this.setState({
      calendar: calendarr
    });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            onChange={e => this.setState({ inputCity: e.target.value })}
            type="text"
            placeholder="Enter City Name"
            required
          />

          <button type="submit">Submit</button>
        </form>

        <DatePicker onChange={this.onChange} value={this.state.date} />

        <p>{this.state.lat}</p>
        <p>{this.state.lon}</p>
        <p>{this.state.condition}</p>
        <p>{this.state.minimumTemperature}</p>
        <p>{this.state.maximumTemperature}</p>
        <p>{new Date(this.state.calendar).getTime()}</p>
      </div>
    );
  }
}

export default Form;
...