Question

我正在尝试通过钩子实现api调用，但是我不知道为什么状态没有更新。有人可以看一下并告诉我原因吗？

import React,{useState} from 'react';

function Weather(){
    var [weat,setWeat]=useState({city:'',report:[]})
    var UpdateCity = event =>{
        setWeat({...weat,city:event.target.value});
    }
    var UpdateReport = event =>{
        var addr="http://api.openweathermap.org/data/2.5/weather?q="+weat.city+"&appid=04e"
        console.log(addr);
        fetch(addr)
        .then(res=>res.json())
        .then(res=>{
            setWeat({...weat,report:res});
        });

    }
    return(
        <>
            <h1>Welcome to my weather App</h1>
            <h3>Please enter your city</h3>
            <input type='text' onChange={UpdateCity} placeholder='Enter your City'></input>
            <input type='submit' onClick={UpdateReport}></input>
        </>
    )
}

export default Weather;

Answer 1

您没有传递用于身份验证的密钥，因此它基本上会出错，因为您不处理错误情况，这就是为什么您看不到它的原因

因此，您需要进行以下更新并在url上传递密钥以获取数据。

除了该代码看起来还不错

var UpdateReport = event =>{
        var addr="http://api.openweathermap.org/data/2.5/weather?q="+weat.city+"&appid=04e"
        console.log(addr);
        fetch(addr)
        .then(res=>res.json())
        .then(res=>{
            setWeat({...weat,report:res});
        })
        .catch(error => {
          console.log(error)
        })

    }

更新

所以问题不在更新状态，这是一个cors问题。参见带有示例api here的工作代码和框，

Answer 2

您只是在API URL中缺少s。我相信通话只能通过 HTTPS

进行

https://api.openweathermap.org/.....

此外，正如@DILEEP THOMAS所提到的，最好添加catch块，这将有助于您了解为何提取无法正常工作。

.catch(err => console.log(err.message))

反应不通过钩子获取API数据时更新状态

2 个答案: