React useEffect中调用setData后useState状态未更新问题

你遇到的setData未更新的判断是误判，核心是两个React基础机制的认知偏差：

• setState是异步批处理操作，调用setData(resp)后不会同步修改当前作用域下的Data变量，紧跟在后面写console.log(Data)拿到的永远是当前渲染闭包里的旧值，不可能拿到刚提交的新状态。
• 你给useEffect传了空依赖数组[]，整个effect逻辑只会在组件首次挂载时执行一次，其中注册的setInterval回调永久捕获了首次渲染时的Data值——也就是初始化的空数组，不管后续状态怎么更新，定时器回调里访问到的Data永远是这个初始空值。

补充：你当前的setData(resp)实际上是正常执行的，状态确实已经更新了，只是你打印日志的位置不对，才误以为状态没改。

1. 不要在setData调用后立刻打印状态值，要观测最新状态，要么单独写一个依赖Data的useEffect监听变化，要么直接在组件渲染的JSX中使用Data验证渲染结果。
2. 轮询逻辑中建议用函数式写法更新状态，彻底规避闭包陈旧问题；同时补上请求错误捕获，避免接口报错时轮询中断。
3. 优化loading逻辑，只在首次拉取到数据后关闭loading，后续轮询不需要重复设置loading状态；组件挂载时立即触发一次请求，不用等第一个3秒间隔。

修正后的完整代码如下：

const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);

// 单独监听数据变化打印最新值
useEffect(() => {
  console.log('更新后的行情数据：', data);
}, [data])

useEffect(() => {
  const fetchTickerData = () => {
    fetch('https://api.coindcx.com/exchange/ticker')
      .then(result => result.json())
      .then(resp => {
        console.log('接口返回原始响应：', resp);
        // 函数式更新规避闭包问题
        setData(() => resp);
        // 仅首次加载完成后关闭loading
        setLoading(prev => prev ? false : prev);
      })
      .catch(err => {
        console.error('行情数据拉取失败：', err);
      })
  }

  // 挂载后立即拉取一次数据
  fetchTickerData();
  const interval = setInterval(fetchTickerData, 3000);

  return () => clearInterval(interval);
}, [])

你可以在组件的返回JSX中渲染{data.length}，会发现首次请求完成后页面上显示的数组长度和接口返回的数组长度完全一致，证明状态已经正常更新。

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