使用React.useEffect时组件结果更新滞后是什么原因？

核心问题原因 #

你把状态更新逻辑写在了useEffect的清理函数中，这是更新滞后的直接诱因：

• useEffect的执行逻辑为：组件渲染完成 → 执行回调函数主体内容 → 依赖变更/组件卸载时执行return返回的清理函数
• 你当前将setResults(data)放在return后，清理函数只会在下一次依赖更新前/组件卸载时执行，此时取到的是上一次渲染闭包中的旧data值，自然永远显示上一次的数值。

额外隐患 #

你备注data是来自父组件的可变对象，若父组件修改data时是直接修改原对象属性（如data.number = 123）而非返回新的对象引用，React浅对比会检测不到依赖变化，useEffect永远不会触发。

修复方案 #

1. 修正useEffect写法 #

将状态更新逻辑放到回调主体中，不要放在清理函数位置：

React.useEffect(() => {
  setResults(data)
}, [data]);

2. 保证依赖变更可被检测 #

父组件修改data时需返回新的对象引用，示例：

// 父组件更新data的正确写法
setData(prev => ({
  ...prev,
  number: 新数值
}))

3. 冗余状态优化 #

如果results完全由props.data派生，不需要额外维护本地状态，可以直接用props渲染，从根源避免状态不同步问题：

function Process(props) {
  return <p>{props.data.number}</p>
};

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