Reactjs 无法显示openweatherAPI中的数据

我正在尝试显示来自OpenWeatherAPI的一些数据。我可以console.log数据并查看对象，但从那里我不知道如何捕捉正确的值。我将在下面粘贴一些代码

我的问题是，无论我如何尝试从该对象中获取一些数据，我似乎都没有成功

console.log（data）

给了我一个对象，但每次我尝试，例如

data.main.temp

或

data.city

时，它都会给我一个错误

有什么建议吗

  state = {
        temperature: null,
        city: undefined,
        country: undefined,
        humidity: undefined,
        description: undefined,
        error: undefined
    }
    getWeather = async (e) => {
        e.preventDefault();
        const city = e.target.elements.city.value;
        const country = e.target.elements.country.value;
        const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);
        const data = api_call.json();

        console.log(data);        

        //To check after data
        if(city && country){
            this.setState({
                //temperature: data.main.temp,
                //city: data.name,
                //country: data.sys.country,
                //humidity: data.sys.humidity,
                //description: data.weather[0].description,
                error: ""
            });        
        } else {
            this.setState({
                temperature: undefined,
                city: undefined,
                country: undefined,
                humidity: undefined,
                description: undefined,
                error: "Please enter values"
            });

How the object looks while fetched.

Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Object
base: "stations"
clouds: {all: 40}
cod: 200
coord: {lon: -2.24, lat: 53.48}
dt: 1569681998
id: 2643123
main: {temp: 15.43, pressure: 1005, humidity: 87, temp_min: 12.78, temp_max: 17.78}
name: "Manchester"

状态={
温度：零，
城市：未定义，
国家：未定义，
湿度：未定义，
说明：未定义，
错误：未定义
}
getWeather=async（e）=>{
e、 预防默认值（）；
const city=e.target.elements.city.value；
const country=e.target.elements.country.value；
const api_call=等待获取(`http://api.openweathermap.org/data/2.5/weather?q=${city}、${country}&appid=${API_KEY}&units=metric`）；
const data=api_call.json（）；
控制台日志（数据）；
//核对数据
if（城市和国家）{
这是我的国家({
//温度：data.main.temp，
//城市：data.name，
//国家：data.sys.country，
//湿度：data.sys.湿度，
//description:data.weather[0]。description，
错误：“
});        
}否则{
这是我的国家({
温度：未定义，
城市：未定义，
国家：未定义，
湿度：未定义，
说明：未定义，
错误：“请输入值”
});
获取对象时对象的外观。
承诺{}
__承诺
[[PromiseStatus]]：“已解决”
[[PromiseValue]]：对象
基地：“电台”
云：{all:40}
化学需氧量：200
坐标：{lon:-2.24，lat:53.48}
dt:1569681998
身份证号码：2643123
干管：{温度：15.43，压力：1005，湿度：87，最低温度：12.78，最高温度：17.78}
姓名：“曼彻斯特”

你有没有试过像这样使用

try/catch

：

getWeather = async (e) => {
    e.preventDefault();
    let response = null;
    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;
    try {
        response = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);
        const data = response.json()
        data && this.setState({
                temperature: data.main && data.main.temp,
                city: data.name,
                country: data.sys && data.sys.country,
                humidity: data.sys && data.sys.humidity,
                description: data.weather[0].description,
                error: ""
            }); 
    } catch (error) {
         this.setState({
                temperature: undefined,
                city: undefined,
                country: undefined,
                humidity: undefined,
                description: undefined,
                error: "Please enter values"
         });
    }
}

---

您是否尝试过使用类似以下的

try/catch

：

getWeather = async (e) => {
    e.preventDefault();
    let response = null;
    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;
    try {
        response = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);
        const data = response.json()
        data && this.setState({
                temperature: data.main && data.main.temp,
                city: data.name,
                country: data.sys && data.sys.country,
                humidity: data.sys && data.sys.humidity,
                description: data.weather[0].description,
                error: ""
            }); 
    } catch (error) {
         this.setState({
                temperature: undefined,
                city: undefined,
                country: undefined,
                humidity: undefined,
                description: undefined,
                error: "Please enter values"
         });
    }
}

---

我相信

api\u call.json（）

会返回一个承诺，这就是您遇到问题的原因

我建议您也尝试

等待该声明：

const data=wait api_call.json（）；

有关
fetch
api的更多信息，您可以在此处找到：

干杯！
我相信
api\u call.json（）
会返回一个承诺，这就是您遇到问题的原因

我建议您也尝试
等待该声明：

const data=wait api_call.json（）；

有关
fetch
api的更多信息，您可以在此处找到：

干杯！
您能告诉我们在尝试访问所需数据时会出现什么样的错误吗？是的，很抱歉，出现了：×未处理的拒绝（TypeError）：无法读取未定义数据的属性“temp”您能告诉我们在尝试访问所需数据时会出现什么样的错误吗？是的，很抱歉，出现了：×未处理的拒绝（TypeError）：无法读取未定义的属性“temp”非常感谢先生！非常感谢先生！