React onChange事件中setState后发起HTTP请求的正确实现方案

你的写法是错误的，会导致三个明确的问题：

• setState是异步批量执行的，你在onChange回调中调用setState后，同步执行的req1、req2通过闭包拿到的还是更新前的旧状态，请求携带的参数从根源上就可能不符合预期。
• 两个请求独立并行发起，返回顺序完全不受控，只要其中一个请求先返回就会触发对应状态更新，导致ApexCharts拿到半更新的非完整数据触发重绘，出现你看到的异常波动。
• 没有做请求竞态处理，如果用户快速切换下拉选项，之前发起的旧请求返回后会覆盖最新选中值对应的状态，导致图表显示和用户选择不匹配的脏数据。

1. 修正状态依赖逻辑 #

不要试图在事件回调里等setState执行完再读状态发请求，直接把用户选中的最新值作为参数传给请求逻辑，从根源上避免闭包旧值问题。

2. 统一请求调度，消除中间渲染态 #

把请求逻辑收敛到选中值的监听副作用里，用Promise.all等待两个请求全部返回后，再一次性更新所有图表相关的状态，避免单个请求返回触发的半数据重绘。同时配合AbortController取消上一轮未完成的旧请求，解决竞态问题。

3. 加渲染兜底避免视觉波动 #

请求加载过程中给图表区域增加加载态，要么暂时显示上一次的完整数据加加载提示，要么等所有新数据准备完成后再触发图表重绘，从渲染层阻断非预期数据的展示。

参考实现代码：

import { useState, useEffect } from 'react'
import axios from 'axios'
import Select from '对应组件路径'
import Chart from 'react-apexcharts'

function ChartContainer() {
  // 下拉选中值
  const [selectVal, setSelectVal] = useState(初始选中值)
  // 两个接口对应的图表数据
  const [chartSource1, setChartSource1] = useState(初始值)
  const [chartSource2, setChartSource2] = useState(初始值)
  // 加载态
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    const abortController = new AbortController()
    const fetchData = async () => {
      setIsLoading(true)
      try {
        // 并行发起两个请求，等待全部返回
        const [res1, res2] = await Promise.all([
          axios.get(url1, {
            params: { dimension: selectVal },
            signal: abortController.signal
          }),
          axios.get(url2, {
            params: { dimension: selectVal },
            signal: abortController.signal
          })
        ])
        // 所有数据就绪后一次性更新状态，触发一次图表重绘
        setChartSource1(res1.data)
        setChartSource2(res2.data)
      } catch (err) {
        // 忽略主动取消的请求报错
        if (err.name !== 'CanceledError') console.error('数据拉取失败', err)
      } finally {
        setIsLoading(false)
      }
    }

    fetchData()
    // 选中值变化、组件卸载时取消未完成的旧请求
    return () => abortController.abort()
  }, [selectVal])

  return (
    <div>
      <Select
        options={[...]}
        value={selectVal}
        onChange={val => setSelectVal(val)}
      />
      {/* 加载时可选择显示遮罩，或者传入key强制数据就绪后重挂载图表，避免增量更新抖动 */}
      <div style={{ position: 'relative', opacity: isLoading ? 0.6 : 1 }}>
        {isLoading && <div className="chart-loading">数据加载中...</div>}
        <Chart
          key={selectVal} // 绑定key避免不同维度数据增量更新导致的渲染异常
          series={[...]} // 传入整合好的完整chartSource1、chartSource2
          options={[...]}
        />
      </div>
    </div>
  )
}

如果你的React版本低于18，不支持自动批处理，在Promise.all拿到所有返回值后，可以用unstable_batchedUpdates包裹多个setState调用，确保只触发一次重绘，进一步减少不必要的渲染波动。

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