为什么修改 Ant Design 组件传入的对象或数组属性后组件不更新【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design在 React 项目中使用 Ant Designantd组件时有一种典型的“不生效”现象状态已经变更、传给组件的对象或数组属性内容也改了但组件的显示却保持不变。根据 Ant Design 官方 FAQ这是 antd 内部对 props 做的性能优化导致的预期行为而不是组件的 bug。本文说明该现象的原因和官方给出的修改方式改完后可对照组件是否随状态更新来判断是否生效。现象的原因antd 内部对 props 做浅比较官方 FAQdocs/react/faq.zh-CN.md对这一现象的解释是antd 内部会对 props 进行浅比较实现性能优化。当状态变更你总是应该传递一个新的对象。也就是说antd 在判断某个 prop 是否变化时采用的是浅比较而不是逐字段深比较避免每次渲染都做高开销的深度对比如果你传给组件的是对象或数组并且是在原有引用上就地修改直接给原对象增删改字段、改原数组元素这个对象或数组的引用本身没有变浅比较据此判断该 prop “未变化”组件便不会更新。所以“修改了对象里的字段但组件不更新”不是状态没更新而是传给组件的引用没有换。修改方式状态变更时总是传递一个新的对象官方给出的解决方案就一句话当状态变更你总是应该传递一个新的对象。对应的修改步骤是定位到那个不更新的对象或数组属性检查代码里对应的状态是如何变更的如果变更方式是直接修改原对象/原数组再把这个原引用传给组件这就是问题所在改为每次状态变更时生成一个新的对象或数组把新引用传给组件。下面用伪代码示意这一改法其中obj、name、MyAntdComponent均为示意变量需替换为你项目中实际的对象、字段和组件// 修改前在原对象上就地改字段引用未变组件不会更新 obj.name newName; // 修改后状态变更时生成新对象把新引用传给组件 const nextObj { ...obj, name: newName }; MyAntdComponent obj{nextObj} /;数组属性同理不要依赖原地修改原数组状态变更时生成一个新的数组再传给组件。如何判断修改是否生效判断依据就是问题现象的反面状态变更之后组件的显示要跟随新对象的内容同步更新。如果改完仍不更新回到官方解释再核对一遍——传给组件的是不是本次变更“之后”生成的新对象而不是原来的那个引用只要引用没变浅比较就会继续判定为未变化。进一步阅读中文 FAQ 原文docs/react/faq.zh-CN.md 中“为什么修改组件传入的对象或数组属性组件不会更新”一节英文 FAQdocs/react/faq.en-US.md 中的对应条目antd use shallow compare of props to optimize performance. You should always pass the new object when updating the state.。官方 FAQ 同时建议参考 React 官方文档理解 React 组件的状态与 props 更新机制——这一行为发生在 React 的 props 更新流程与 antd 的浅比较优化共同作用的环节把 React 侧的状态更新方式搞清楚是避免此类问题的前提。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
