为何useState与useEffect配合失效？useQuery场景状态更新异常

架构老林

2026-8-26

问题原因分析

1. useState状态更新是异步操作

调用setDataSortArray(data)后，React不会立即更新dataSortArray的状态值，而是将这次更新加入状态更新队列，等待当前渲染批次完成后才批量处理更新。所以在setDataSortArray之后紧接着调用console.log(dataSortArray)，打印的还是更新前的初始空数组[]。

如果要查看更新后的dataSortArray，可以用两种方式：

在组件顶层直接打印（比如console.log(dataSortArray)写在函数组件的最外层）

给dataSortArray添加专门的useEffect监听：

useEffect(() => {
  console.log("✅", dataSortArray);
}, [dataSortArray]);

2. 当前useEffect逻辑存在冗余且依赖缺失

useQuery默认会自动发起请求，不需要在useEffect里手动调用refetch()，这会导致重复请求。如果需要控制请求时机，可以给useQuery添加enabled配置项。
你的useEffect依赖数组为空，只会在组件挂载时执行一次。但调用refetch()后data会更新，此时useEffect不会再次触发，后续状态同步无法执行。如果要在data更新时同步到dataSortArray，应该把loading和data加入依赖数组：
```
useEffect(() => {
  if (!loading && data) {
    setDataSortArray(data);
  }
}, [loading, data]);
```
这样每次loading或data变化时，都会触发逻辑同步状态，且无需手动调用refetch()。