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

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 的工作代码沙箱，

Answer 2

您只是缺少 API URL 中的s。我相信调用只能通过HTTPS工作

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

此外，正如@DILEEP托马斯提到的，最好添加catch块，这将帮助您了解为什么 fetch 无法正常工作。

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

Answer 3

我只是在本地复制了您的代码并添加了我自己的 API 密钥并开箱即用。测试应用时，请打开 chrome 控制台并检查获取数据时是否存在错误，以查看请求是否有错误。

此外，您的查询可能正在运行，并且您看不到组件重新渲染，因为您没有在return中使用weat对象，请在返回之前添加一些日志：

console.log("weat.city: ", weat.city, " weat.report: ", weat.report)
return (
. . . 
)

所以现在你会看到状态是否改变。