Как исправить 'Fetch API не может загрузить http://localhost:3000/static/js/0.chunk.js из-за проверок контроля доступа'

Question

Я использую React для создания универсального веб-приложения о погоде.Прямо сейчас я просто пытаюсь получить данные о погоде для города (т.е. пока не делаю ничего динамического) и регистрирую их в консоли.

Я использую API OpenWeatherMap.

Однако, Я получаю следующие ошибки каждый раз, когда я вызываю API:

1. Fetch API не может загрузить http://localhost:3000/static/js/0.chunk.js из-за проверок контроля доступа.
2. Ошибка: предоставленная вами ошибкане содержит трассировки стека.
3. Необработанное отклонение обещания: Ошибка типа: отменено Я хочу понять, что может вызвать эти ошибки и как их устранить.

Ранее я пытался использовать AccuWeatherAPI, но он выдал те же ошибки.

Однако, если я вызываю API в функции componentDidMount () в React, он просто получает данные.Проблема возникает, когда я пытаюсь получить данные о погоде при отправке формы.

Вот мой основной код приложения:

  weatherData = async function() {
    try {
      const resp = await fetch('https://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=APP-ID');
      const data = await resp.json();
      console.log(data);
    } catch (err) {
      console.log(err)
    }
  }

  render() {
    return (
      <div>
        <Title />
        <Form loadWeather={this.weatherData} />
      </div>
    )
  }

}

Это компонент React:

import React from 'react';
import './Form.css';

const Form = (props) => {
    return (
        <form onSubmit = {props.loadWeather}>
            <input className='input' type='text' name='city' placeholder='Enter City'></input>
            <input className='input' type='text' name='country' placeholder='Enter Country'></input>
            <button className='button'>Get Weather!</button>
        </form>
    )
}

Answer 1

Вам необходимо привязать weatherData к родительскому компоненту, чтобы выполнить его в дочернем элементе.Чтобы это работало, просто привяжите его к конструктору первого компонента:

this.weatherData = this.weatherData.bind(this)

As:

constructor(props) {
  super(props)
  this.state = {
   //blabla
   },
  this.weatherData = this.weatherData.bind(this)
}