React页面加载useEffect请求接口后setFormValues状态未更新问题

云原生阿岚

2026-9-3

问题根因

你遇到的是React状态更新的闭包特性导致的误判，setFormValues实际上已经正常触发了状态更新，你打印出空值是因为代码逻辑存在两个认知误区：

状态更新异步+闭包捕获：useEffect的回调函数在执行时，会捕获当前渲染周期的formValues值（也就是你定义的初始空值状态）。setFormValues是异步触发状态更新的，不会修改当前函数作用域内已经捕获的formValues变量，所以你紧跟在setFormValues后面打印formValues，拿到的永远是effect执行时捕获的旧值，和状态是否更新成功没有关系。
冗余字段透传：你直接把整个res.data传给setFormValues，后端返回的createdAt/updatedAt/__v/_id这些非表单字段会被一起存入表单状态，虽然不会直接导致表单不更新，但会造成状态冗余，后续表单提交时容易把多余字段意外传给接口。

验证方法

要确认状态是否真的更新成功，把console.log(formValues)挪到组件顶层（useEffect外部、组件return语句之前），接口请求完成、状态更新触发组件重渲染时，这里就会打印出最新的表单值。

修复方案

调整状态打印逻辑，不要在setState的当前闭包里读取最新状态：
- 如果只是要调试接口返回值，直接打印res.data即可
- 如果要监听表单状态变化，单独加一个依赖为formValues的useEffect执行打印：
```
useEffect(() => {
  console.log('当前最新表单值：', formValues)
}, [formValues])
```

优化setFormValues的传参，只提取表单需要的字段，过滤后端返回的冗余字段：

if (!isCancelled) {
  // 只提取表单定义的字段，避免冗余字段存入状态
  setFormValues({
    location: res.data.location,
    category: res.data.category,
    item_name: res.data.item_name,
    description: res.data.description,
    unit_measure: res.data.unit_measure,
    case_size: res.data.case_size
  })
}