React Hooks更新的状态无法传入drawChart函数的正确解决方法

原代码的核心问题 #

• 第一个Promise回调没有返回值，第二个.then接收到的参数永远是undefined
• setResponseMonthly是异步状态更新方法，调用后不会同步返回更新后的值，当前执行上下文中无法拿到最新的state
• 当前useEffect的闭包捕获的responseMonthly是组件首次渲染时的初始值，哪怕后面state更新了，这个闭包里拿到的还是旧值

方案1：直接传递接口返回数据（最简洁高效） #

这种方案不需要等待state更新完成，直接把接口解析后的原始数据传给绘图函数，setResponseMonthly仅用于把数据存到state供其他业务逻辑使用，适合绘图逻辑只需要拿到首次接口返回数据的场景。
示例代码：

useEffect(() => {
  axios.get(url)
    .then(response => {
      const chartData = JSON.parse(response.data)
      // 存储状态供其他逻辑使用
      setResponseMonthly(chartData)
      // 直接传原始数据绘图，跳过状态异步更新的等待
      drawChart(chartData, 'month')
    })
    .catch(err => console.log(err))
}, [])

方案2：独立Effect监听状态变化触发绘图 #

如果后续业务中存在修改responseMonthly、需要触发图表重绘的场景，就把绘图逻辑拆成独立的Effect，将responseMonthly作为依赖项，只要状态发生更新就自动触发绘图。
示例代码：

// 接口请求逻辑独立处理
useEffect(() => {
  axios.get(url)
    .then(response => {
      const chartData = JSON.parse(response.data)
      setResponseMonthly(chartData)
    })
    .catch(err => console.log(err))
}, [])

// 绘图逻辑独立监听状态变化
useEffect(() => {
  // 先做空值判断，避免初始空状态传入绘图函数报错
  if (responseMonthly && Object.keys(responseMonthly).length) {
    drawChart(responseMonthly, 'month')
  }
}, [responseMonthly])

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