🧐[问题]在使用ProTable时，查询表单使用renderFormItem自定义表单项，在表单展开或者收起时，自定义表单项都会更新，如何避免？

[bingo-developer]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🧐 问题描述

💻 示例代码

{ title: UseIntl({ id: 'common.type.device' }), dataIndex: 'deviceName', key: 'deviceType', renderFormItem: () => ( <DeviceType noStyle url="/device/service/api/device/type" name="deviceType" options={{ label: 'deviceName', value: 'deviceType', }} /> ), render: (_, record) => convertDeviceType(record.deviceName), }

🚑 其他信息

[dosubot]

Hi @bingo-developer! I'm Dosu and I’m helping the pro-components team.

ProTable 的 renderFormItem 在表单收起/展开时会重新执行，导致自定义表单项（如 DeviceType）被重新渲染。这是因为 ProTable 的查询表单在切换收起/展开状态时，会重新计算和渲染所有表单项，renderFormItem 作为函数会被重新调用，React 组件也会重新挂载。这个行为是为了保证表单依赖项的正确性，但如果自定义组件有副作用（比如初始化时请求接口），就会导致多次请求或不必要的更新。

目前官方没有彻底避免这种重复渲染的推荐做法，这是 ProTable 现有架构的已知限制。常见的优化建议有：

• 保持自定义表单组件内部逻辑简单、无副作用，比如用 useEffect 控制只在必要时发起请求。
• 如果组件必须请求数据，可以用 useRef 或 useMemo 缓存结果，避免每次挂载都重新请求。
• 关注后续版本是否有相关优化或新 API 支持。

详细讨论和源码分析可参考 issue #3396、issue #9163 和 源码分析。

简单示例：

const DeviceType = React.memo((props) => {
  const [options, setOptions] = React.useState([]);
  const hasFetched = React.useRef(false);

  React.useEffect(() => {
    if (!hasFetched.current) {
      fetchOptions().then(setOptions);
      hasFetched.current = true;
    }
  }, []);

  // ...渲染逻辑
});

这样可以避免组件每次挂载都重新请求数据。

如果你的组件依赖表单其他字段变化，可以用 formItemProps.dependencies 精细控制，但收起/展开还是会触发 renderFormItem。当前只能通过组件内部优化来减少性能影响。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}