在React开发过程中，我遇到这样的情况：页面按钮的loading属性失效。尽管通过useEffect打印发现loading状态（确实在true和false之间切换，但按钮却没有表现出预期的加载效果

一、问题现象回顾

const [uploadLoading, setUploadLoading] = useState(false);<Button loading={uploadLoading}>上传文件</Button>

虽然你在控制台通过useEffect确认了uploadLoading的状态确实发生了变化：

useEffect(() => {console.log('uploadLoading:', uploadLoading);
}, [uploadLoading]);

但是按钮上的loading效果却始终没有更新。

---

二、常见排查思路与原因分析

1. 组件未重新渲染？

使用useState和useEffect时，只要状态发生变化，React会自动触发组件的重新渲染。因此理论上来说，组件应该更新。如果你能看到useEffect中的打印，说明状态确实变了，也说明组件至少执行了一次渲染。

结论：不是组件不更新的问题。

---

2. 状态变量作用域或引用问题？

有时候我们在闭包中使用状态变量（比如在useCallback、useMemo中），如果没有正确设置依赖项，可能会导致闭包中获取到的是旧值。

例如：

const handleClick = useCallback(() => {console.log(uploadLoading); // 可能是旧值
}, []);

不过在这个问题中，我们关注的是直接传给按钮的loading属性，所以这个可能性较低。

---

3. Ant Design 的 Button/Upload 组件受控性问题？

Ant Design 的 Button 和 Upload 组件对 loading 属性通常是“受控”的，也就是说它们的行为完全取决于你传入的 loading 值。只要你传入的值正确，它就应该正常工作。

结论：组件本身没有问题，关键在于传入的值是否是最新的。

---

4. 父组件 props 没有变化？

如果你使用的某个自定义 Hook（如 useMemeberTable）返回了 loading 状态，而其内部逻辑依赖于某些 props，那么如果这些 props 没有变化，Hook 返回的状态也可能不变。

这种情况需要检查 Hook 的实现逻辑以及调用它的组件是否更新了 props。

---

5. React 18 的严格模式或并发特性？

React 18 引入了并发模式的一些新特性，比如过渡更新（transitions）、批处理等，有时会让状态更新看起来“延迟”了。

但如果你已经通过 useEffect 打印确认了状态变化，说明状态本身没有问题，只是 UI 没有反映出来。

---

三、深入问题核心：useMemo依赖项不全

const columns = useMemo(() => {return [{title: '操作',dataIndex: 'action',render: (_, record) => (<Button loading={uploadLoading}>上传文件</Button>)}];
}, [tab]); // 仅依赖 tab

这里的关键问题是：columns 是通过 useMemo 缓存生成的，而它的依赖数组只有 [tab]，并没有包含 uploadLoading 和 fileLoading。

这意味着：

• 当 uploadLoading 发生变化时，columns 不会重新计算。
• 因此，render 函数中使用的仍然是最初创建时的 uploadLoading 值（即闭包中的旧值）。
• 这就导致按钮的 loading 属性始终为初始值，无法更新。

---

四、解决方案

要解决这个问题，只需要将 uploadLoading 和 fileLoading 添加到 useMemo 的依赖数组中：

const columns = useMemo(() => {return [{title: '操作',dataIndex: 'action',render: (_, record) => (<Button loading={uploadLoading}>上传文件</Button>)}];
}, [tab, uploadLoading, fileLoading]); // 添加 missing dependencies

这样，每当 uploadLoading 或 fileLoading 改变时，columns 会被重新生成，render 函数也会拿到最新的状态值，从而正确更新按钮的 loading 状态。

---

五、知识扩展：React 中的闭包陷阱与依赖管理

1. 闭包陷阱（Closure in Callbacks）

在 React 中，函数组件本质上是一个闭包函数。当你在 useCallback、useEffect 或 useMemo 中引用状态变量时，如果不更新依赖项，就会导致函数体中使用的是旧的状态值。

例如：

const [count, setCount] = useState(0);const logCount = useCallback(() => {console.log(count);
}, []);// 即使 count 更新，logCount 仍会输出初始值 0

2. useMemo 的依赖管理

useMemo 用于缓存计算结果以提高性能，但它依赖的变量必须完整列出，否则会导致缓存值过期。

建议：

• 使用 ESLint 插件（如 eslint-plugin-react-hooks）来检测依赖项是否完整。
• 对于复杂对象或数组，考虑使用 useDeepCompareMemo 来做深度比较。

3. Ant Design 组件的受控性

Ant Design 的大多数组件都支持受控模式，即其状态完全由你传入的 props 控制。因此，确保传入的 props 是最新且正确的，是使用这些组件的关键。

---

六、总结

问题本质：

useMemo 的依赖项未包含所有影响其内部逻辑的状态变量（如 uploadLoading 和 fileLoading），导致闭包中获取的是旧值，按钮的 loading 状态未更新。

解决方法：

将 uploadLoading 和 fileLoading 添加到 useMemo 的依赖数组中。

延伸学习：

• React 的闭包机制与依赖管理
• 如何正确使用 useMemo、useCallback
• Ant Design 组件的受控与非受控模式
• React 18 新特性与状态更新机制

---

七、参考代码修改示例

const columns = useMemo(() => {return [{title: '操作',dataIndex: 'action',render: (_, record) => (<><Button loading={uploadLoading} onClick={() => setId(record.id)}>上传文件</Button><Button loading={fileLoading} onClick={() => fetchFile(record.id)}>下载文件</Button></>)}];
}, [tab, uploadLoading, fileLoading]);

—# 欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

1. 全新的界面设计 ，将会带来全新的写作体验；
2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
4. 全新的 KaTeX数学公式 语法；
5. 增加了支持甘特图的mermaid语法¹ 功能；
6. 增加了 多屏幕编辑 Markdown文章功能；
7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
8. 增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to-HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

• 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

---

1. mermaid语法说明 ↩︎

2. 注脚的解释 ↩︎