React中Ant Design Tree组件不更新 始终展示旧状态问题

使用状态管理方案存储WebSocket推送的更新数据时，直接渲染原始状态值一切正常，但接入Antd Tree组件后，组件始终显示上一次的状态，无法同步最新数据。
曾尝试对数据做深拷贝排除引用类型导致的更新异常，但问题没有解决。

相关问题代码：

const serviceTreeData = useServiceTreeStore((store) => store.serviceTreeData);
const [treeData, setTreeData] = React.useState(serviceTreeData);
React.useEffect(() => {
  const data = serviceTreeData.map(data => cloneDeep(data))
  setTreeData(data);
}, [serviceTreeData]);

问题核心是多余的本地状态中转+useEffect执行时序问题：

• useEffect的执行时机是在组件完成DOM渲染提交之后，属于异步执行逻辑。当store里的serviceTreeData更新触发组件重渲染时，传给Tree组件的还是本地state里存储的上一轮旧值，等useEffect执行完setTreeData触发下一次渲染，Tree拿到新值时已经晚了一拍，就会出现永远展示上一次状态的现象。
• 深拷贝操作只解决了数据引用相同的问题，解决不了状态更新时序差的问题。

• 移除多余的本地treeData状态和对应的useEffect监听逻辑，不要做无意义的状态中转。如果需要对store返回的原始数据做格式转换，用useMemo在渲染阶段同步处理即可，保证传给Tree组件的数据是每次渲染时的最新值：

const serviceTreeData = useServiceTreeStore((store) => store.serviceTreeData);
// 渲染阶段同步做数据转换，不存在时序差
const treeData = React.useMemo(() => {
  return serviceTreeData.map(item => cloneDeep(item));
}, [serviceTreeData]);

// 直接传入处理好的最新数据给Tree组件
<Tree treeData={treeData} /* 其余配置项 */ />

• 如果业务场景确实需要在本地维护Tree的独立状态（比如节点临时编辑、拖拽排序不需要立即同步到全局store），需要确保每次更新本地treeData时传入全新的数组/对象引用，同时检查所有树节点的key值全局唯一，避免Antd Tree内部的节点缓存命中旧数据导致不更新。

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