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

【问题标题】：React not updating state on fetching API data by hooks通过钩子获取 API 数据时反应不更新状态
【发布时间】：2020-04-23 20:27:18
【问题描述】：

我正在尝试通过钩子实现 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;

【问题讨论】：

你在传递api密钥吗？
是的，我通过了。我只是在这里掩盖了它
尝试添加 catch 块并记录 error.message 然后您将能够看到错误是什么，然后在问题中更新该错误，以便找到它会有所帮助
也许将您的状态拆分出来，使用两个状态挂钩并独立使用/更新它们会更容易。或者使用状态更新功能，setWeat(prevWeat => { /* copy, mutate, return */ })

标签： reactjs api react-hooks

【解决方案1】：

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

所以你需要更新如下，并通过url上的key来获取数据。

除了代码看起来不错

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

【讨论】：

我正在传递密钥，我从 api 得到了正确的响应，但它没有设置状态。
检查这个，问题是cors问题codesandbox.io/s/59609653-so-open-weather-map-htiec，输入一些东西然后点击提交等待一段时间它会显示响应，所以如果你从get url中删除url cors infront它会去捕获块，因此它基本上是 cors 问题，它与状态无关，我将响应作为样本的对象，因此将状态作为对象，您可以对其进行更新

【解决方案2】：

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

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

另外，正如@DILEEP THOMAS 所提到的，最好添加catch 块，这将帮助您了解获取无法正常工作的原因。

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

报告部分未更新。它仍然显示空数组:(
控制台上没有错误？在请求选项卡上，您应该会看到您的请求以及那里的响应...