Question

我正在使用React构建一个通用的天气网络应用程序。现在，我只是想获取一个城市的天气数据（即，还没有做任何动态的事情）并将其记录在控制台中。

我正在使用OpenWeatherMap API。

但是，每次调用API时，都会出现以下错误：

由于访问控制检查，提取API无法加载http://localhost:3000/static/js/0.chunk.js。
错误：您提供的错误不包含堆栈跟踪。
未处理的承诺拒绝：TypeError：已取消我想了解什么可能导致这些错误以及如何解决这些错误。

以前，我曾尝试使用AccuWeather API，但它给出了相同的错误。

但是，如果我在React的componentDidMount（）函数中调用API，它将获取数据就好了。当我尝试在提交表单时获取天气数据时，就会出现问题。

这是我的主要应用代码：

  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)

为：

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

Answer 2

您需要完全致力于一种方法或使用另一种方法：

基本React.Component类示例：

constructor(props) {
  //...
  this.weatherData = this.weatherData.bind(this);
}

async weatherData() {/* your code */}

或者，使用冷静的方法：

weatherData = () => {/* ... */}

您的镇静方法是分配一个function()，它重新绑定this的上下文。您需要分配箭头功能() => {}来保存this，以免丢失this。

解决这种装订物灾难的最佳方法是采用功能方法：

function WeatherThing() {
  const weatherData = async () => {
    const weatherInfo = await weatherDataFetch();
  }

  return (<div onClick={weatherData}>Do Weather stuff</div>);
}

我建议阅读有关React Hooks的内容，以使您的代码更具可读性。

Answer 3

我更改了我的开发环境的主机名并遇到了同样的问题。

如果您重新启动浏览器或机器，问题就会消失。

如何修复“由于访问控制检查，Fetch API无法加载http：// localhost：3000 / static / js / 0.chunk.js”

3 个答案: