Javascript 获取调用中的React API句柄错误：TypeError无法读取属性'；临时工'；未定义的

我正在尝试构建一个天气应用程序，它对有效的城市名称很有效，但对错误的城市名称不起作用

我构建了两个模块，第一个是App.js，第二个是Form.js，它将用户输入的城市名称传递给App.js

App.js是：-

从“React”导入React；
从“./Form.js”导入表单；
类应用程序扩展了React.Component{
状态={
天气：{
温度：“，
类型：“，
城市：“，
国家：“，
风：“，
湿度：}，
requestSuccessfull:true
}
UpdateWatherDetails=（区域）=>{
取回(`http://api.openweathermap.org/data/2.5/weather?q=${area}&units=metric&APPID=b66ecf3c7e717c4eb45abd13e53ba0ac`，{模式：'cors'}）
。然后（（响应）=>{
返回（response.json（））；
})
。然后（（响应）=>{
this.setState（（prevState）=>({
天气：{
温度：response.main.temp，
类型：响应。天气[0]。说明，
城市：response.name，
国家：response.sys.country，
风：响应。风。速度，
湿度：响应。主。湿度，
}
}))
})
.catch（（错误）=>{
这是我的国家({
requestSuccessfull:false
})
console.log（“发生错误”）
})
}
render（）{
if（this.state.requestSuccessfull）{
返回(
//显示天气详情
)
}
否则{
返回(
//显示用户输入的错误城市名称
)
}
}
}
导出默认应用程序；

我不明白为什么我的catch函数没有运行。我还应该如何处理错误的API调用？ 提交错误的城市名称时，我收到一个错误，如下所示：

TypeError: Cannot read property 'temp' of undefined
  22 | .then((response) =>{
  23 |   this.setState((prevState) =>({
  24 |     weather : { 
> 25 |         temp:response.main.temp,
     | ^  26 |         type:response.weather[0].description,
  27 |         city:response.name,
  28 |         country:response.sys.country,

---

还有一个愚蠢的疑问。API调用中的错误不应该被忽略吗，因为我附加了catch函数来处理任何错误？

下面是一个示例，说明如何完成类似的操作。。我相信使用async/await比使用promise更容易理解。跟踪正在发生的事情更容易

这个例子应该是不言自明的，但是如果你有任何问题，请告诉我。我非常乐意帮忙

类应用程序扩展了React.Component{
状态={
天气：{
温度：“，
类型：“，
城市：“，
国家：“，
风：“，
湿度：“
},
地点：“，
面积：“，
错误：“”，
请求成功：“
};
UpdateWatherDetails=异步事件=>{
试一试{
让面积=this.state.location；
让fetchUrl=`http://api.openweathermap.org/data/2.5/weather?q=${area}&units=metric&APPID=b66ecf3c7e717c4eb45abd13e53ba0ac`；
让fetchOptions={mode:“cors”}；
let response=wait fetch（fetchUrl，fetchOptions）；
让weatherData=wait response.json（）；
让newstate={
天气：{
温度：weatherData.main.temp，
类型：weatherData.weather[0]。说明，
城市：weatherData.name，
国家/地区：weatherData.sys.country，
风：天气数据，风速，风速，
湿度：weatherData.main.湿度
},
地点：“，
requestSuccessfull:true
};
this.setState（newstate）；
}捕捉（错误）{
this.setState（prevState=>({
…国家，
requestSuccessfull:false，
错误：呃，
地区：prevState.location，
地点：“
}));
}
};
handleLocationChange=事件=>{
this.setState（{location:event.target.value}）
}
render（）{
返回(
区域：{this.state.location}

键入一个位置以获取天气信息
天气预报
{this.state.requestSuccessfull==真(
成功{JSON.stringify（this.state.weather，null，2）}
 fetch(`http://api.openweathermap.org/data/2.5/weather?q=${area}&units=metric&APPID=b66ecf3c7e717c4eb45abd13e53ba0ac`,{mode:'cors'})
    .then((response)=>{
        if (response.status !== 200) {
        throw new Error("Not 200 response")
       } else return (response.json());
    }).then(do stuff).catch(error => { handle error })

)：this.state.requestSuccessfull==false(
获取“{this.state.area}”的数据时出错，遇到错误：'{
this.state.error&&this.state.error.message
}'
) : (
""
)}
);
}
}
render（，document.body）

来自MDN

从fetch（）返回的承诺不会在HTTP错误状态下拒绝
即使响应是HTTP 404或500。相反，它会解决问题
正常情况下（ok状态设置为false），它只会在
网络故障或任何阻止请求完成的情况

解决方案是检查状态代码，必要时抛出错误

您得到的HTTP状态码是什么@埃米尔，我收到了404的回复码，谢谢！成功了。我想知道你们是如何解决这些问题的？在学习fetch函数时，您已经知道这一点了吗？如果不是的话，您是如何搜索它的？我在学习API时也遇到过这个问题。您可能喜欢axios软件包，因为它会自动检查HTTP代码并为您抛出错误。另外，谷歌是你最好的朋友，我就是这么回答你的问题的。好吧，我在互联网上的某个地方看到了axios，现在我会读到它。再次感谢！谢谢，我得到了解决方案，但async/Wait看起来更简洁易懂，我将实现它。所以等待4xx和5xx的捕获错误？与承诺不同？正确-如果您在文本框中输入无效位置并单击“获取天气”，它将返回404，该值将在
catch
块中拾取。您可以通过在浏览器中浏览到此URL（您将看到404）或在位置搜索框中输入
I NOT EXIST
来验证。如果我的答案有帮助的话，请确保将其标记为已接受！干杯