1

我正在努力将我的数据从获取请求中获取到我的容器状态

我的 fetch 请求存储在 api.js 中，看起来像这样 - 它从一个很好的常量中检索密钥：-

import { openWeatherKey } from './constants';

const getWeather = async() => {
    const base = "https://api.openweathermap.org/data/2.5/onecall";
    const query = `?lat=52.6&lon=-2.2&exclude=hourly,daily&appid=${openWeatherKey}`;

    const response = await fetch(base + query);
    const data = await response.json();

    return data;
}

export { getWeather };

我的容器看起来像这样：-

import React, { Component } from "react";
import './weather.css';
import { getWeather } from './api';

class Spy extends Component {

    constructor() {
        super()
        this.state = {test(){return "this is a test"}}
    }

    render() {
        return (
            <div id="spy-weather" className="app-border">
                <h3 className="spy-name">Weather at { this.props.location } {this.state.test()}</h3> 
            </div>
        )
    }
}

(() => {
    getWeather().then(data => {
        console.log(data);  
    })
})();  

export { Spy as Weather };

我有一个 IIFE 发出请求并将结果打印到控制台。您可以在上面的类声明和导出语句之间看到这一点。

这是控制台的结果 - 请求工作正常

{lat: 52.6, lon: -2.2, timezone: "Europe/London", timezone_offset: 3600, current: {…}}
current: {dt: 1594401262, sunrise: 1594353486, sunset: 1594412995, temp: 289.05, feels_like: 286.49, …}
lat: 52.6
lon: -2.2
timezone: "Europe/London"
timezone_offset: 3600
__proto__: Object

我无法做到的是使用已解决的承诺中的数据设置状态。我尝试了各种方法，包括我见过的一些不起作用的解决方案。

如何在容器中放置和运行该函数，然后使用数据更新状态？

你可能知道，我对 React 还是很陌生。

以诚挚的谢意，

菲尔

4

2 回答 2

1

在基于类的组件中，称为componentDidMount的生命周期方法用于在组件安装后执行某些操作。在您的情况下，在方法中移动 IIFE 中的代码componentDidMount。

state在对象中创建一个属性来保存天气数据。或者，您还可以在state对象中创建一个属性，以保存在从 API 获取数据期间可能发生的任何错误消息。

this.state = {
   weatherData: null,
   error: ''
};

然后从生命周期方法调用getWeather()函数componentDidMount()

componentDidMount() {
    getWeather()
      .then(data => {
        this.setState({ weatherData: data });
      })
      .catch(error => this.setState({ error: error.message }));
}

在功能组件中，useEffect挂钩用于执行任何副作用，例如从 API 获取数据。功能组件中的状态是使用useState挂钩保存的。

如果您使用功能组件，那么您的代码将如下所示：

const [weatherData, setWeatherData] = useState(null);
const [error, setError] = useState(null);

useEffect(() => {
    getWeather()
      .then(data => {
          setWeatherData(data);
      })
      .catch(error => setError(error.message));
}, []);
于 2020-07-10T17:35:14.097 回答
0 
this.state = {test(){return "this is a test"}}

这是状态管理的无效结构，正确的方法

getWeather().then(data => {
        console.log(data);
        this.setState({ weatherData: data });
})

状态结构

state = {
  someProperty: value,
  someArray: [],
  weatherData: {}
}
于 2020-07-10T17:36:34.317 回答