React开发中使用useState回调未解决异步问题，首次提交状态为null

问题根源 #

• setForecast 是React提供的状态更新方法，本身不属于异步函数，不会返回Promise，你代码中在setForecast前添加的await没有任何实际作用，状态更新不会等待该操作完成再执行后续代码。
• React的状态更新是批量延迟生效的，同一个渲染闭包内的状态变量会始终持有当前渲染周期的初始值。你在submitRequest函数中调用完状态更新方法后立刻打印forecast，拿到的必然是本次函数执行时闭包捕获的旧值（也就是初始的null），属于正常现象，和你有没有使用函数式更新的写法无关。
• 你之前查到的useState函数式更新写法，解决的是「新状态依赖旧状态值时，能拿到最新的上一轮状态」的场景，并不解决「更新完成后立刻在当前函数内拿到新状态」的需求，属于对用法的理解偏差。

修复方案 #

• 如果你需要在获取数据后立刻使用forecast对应的内容，可以直接复用已经拿到的currentDay、currentDayDetails变量，不需要从状态中读取：你在调用setForecast的时候已经拿到了这两个值的最新结果，直接使用即可。
• 如果你确实需要在forecast状态更新完成后执行后续逻辑，可以使用useEffect监听forecast的变化，把后续逻辑写在useEffect回调中，示例如下：

useEffect(() => {
  if(forecast) {
    // 这里可以拿到更新后的forecast，执行后续逻辑
    console.log(forecast)
  }
}, [forecast])

• 删掉setForecast前多余的await，你当前的更新逻辑不依赖旧的forecast值，也可以简化为直接传值的写法：

// 原await setForecast(...)可以替换为
setForecast({ currentDay, currentDayDetails })

内容的提问来源于stack exchange，提问作者lisovskiy329