在异步函数中反应 SetState答案

【问题标题】：React SetState within a async function在异步函数中反应 SetState
【发布时间】：2022-02-10 06:19:51
【问题描述】：

我正在尝试学习 React 制作天气应用程序，并且我已经使用 async/await 函数进行了堆叠。这是我面临的麻烦..

我有一个对 api 进行 axios 调用的函数，然后我尝试设置一些状态变量。认为应用程序似乎在解决承诺之前正在运行 setState 方法。

这是进行 axios 调用的方法。

const fetchWeeklyWeather = async () => {

    try {
        let response = await axios.get(url);

        console.log('%cFetch Weekly Weather Response:', 'color: #bada55', response);

        setCurrentWeather(response.data.current);
        setWeeklyWeather(response.data.daily);
        setWeatherAlerts(response.data.alerts);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
}

我在 componentDidMount 上调用该方法，如下所示：

useEffect(() => {
    fetchWeeklyWeather();

    console.log("Current Weather", currentWeather);
    console.log("Weekly Weather", weeklyWeather);
    console.log("Weather alerts", weatherAlerts);

    formatData(weeklyWeather);
}, []);

这很奇怪，因为有时它会起作用，但大多数时候却不起作用。我想我对异步/等待的想法不正确。谁能帮帮我？

非常感谢！

【问题讨论】：

是的，你没有正确使用 async-await。 fetchWeeklyWeather 返回一个承诺，您无需等待。另一个问题是答案所说的，状态更新也可以是异步的。您应该以另一种效果访问每周天气，或者只从 fetchWeeklyWeather 返回您需要的数据，并且不要依赖这里的状态
“您没有正确使用 async-await” OP 使用 async/await 非常好。 “fetchWeeklyWeather 返回一个承诺，而您无需等待” 毫无意义。效果函数不能是异步的，甚至then() 也不是一个选项，因为在运行时状态仍然没有更新。 “状态更新也可以是异步的” 他们是，总是！这就是为什么等待fetchWeeklyWeather() 是不可能的。在 FunctionComponents 中，没有通知告诉您状态何时更新。组件重新渲染，为什么？只有 React 知道。
谢谢大家的回答。今晚我会尝试修复它，看看我是否得到了什么。

标签： javascript reactjs async-await

【解决方案1】：

这里有很多讨论React setState not Updating Immediately

但基本上，setState 是异步/在下一次渲染中更新状态的请求。因此，状态更新不是立即可用/可观察的

【讨论】：

我会检查的。谢谢！