pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

🐛[BUG] 使用BetaSchemaForm时, 当指定renderFormItem,返回defaultRender中包含mode: multiple时表单绘制不出来

Open mylhei opened this issue 4 months ago • 3 comments

提问前先看看:

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

🐛 bug 描述

使用BetaSchemaForm时, 指定了multiple, select绘制不出来 不指定multiple 或不指定renderFormItem时是正常的。

📷 复现步骤

指定: fieldProps: { placeholder: "一多选就不行了", mode: "multiple", }

指定renderFormItem, 且返回defaultRender 时, select无法绘制出来

🏞 期望结果

用schema指定select时,支持单选、多选、tags等

💻 复现代码

https://codesandbox.io/p/sandbox/7y2hdf 参考L53 L55行

© 版本信息

  • ProComponents 版本: [e.g. 4.0.0]
  • umi 版本
  • 浏览器环境
  • 开发环境 [e.g. mac OS]

🚑 其他信息

mylhei avatar Aug 19 '25 11:08 mylhei

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

这个问题的核心原因是:在自定义 renderFormItem 时,如果直接返回 defaultRender,但没有把 config.fieldProps(包含 mode: 'multiple')正确传递给 defaultRender,Select 组件就不会以多选模式渲染,甚至可能渲染不出来。

正确做法是:在 renderFormItem 里调用 defaultRender 时,确保把 fieldProps 合并进去。例如:

renderFormItem: (item, config, form) => {
  // 合并 fieldProps,确保 mode: 'multiple' 被传递
  return config.defaultRender({
    ...item,
    fieldProps: {
      ...item.fieldProps,
      ...config.fieldProps,
    },
  });
}

这样可以保证 Select 能正常支持单选、多选、tags 等模式。相关机制和源码细节可以参考 ProComponents SchemaForm 源码官方文档

如果你用的是新版 ProComponents,renderFormItem 已经重命名为 formItemRender,但用法一致。只要保证 fieldProps 合并传递即可。

To reply, just mention @dosu.


How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Chat with Dosu Join Discord Share on X

dosubot[bot] avatar Aug 19 '25 12:08 dosubot[bot]

@dosu 看起来不是这样,即使传递了fieldProps, 界面也绘制不出

mylhei avatar Aug 20 '25 02:08 mylhei

你的情况确实比较特殊,代码和源码分析显示:只要 fieldProps(包含 mode: 'multiple')正确合并并传递,Select 理论上应该能正常渲染多选模式。如果还是渲染不出来,建议你重点排查以下几个点:

  1. value 必须是数组:antd 的 Select 组件在多选模式下,value 必须是数组,否则不会渲染(甚至会报错)源码参考

  2. options 或 valueEnum 是否有值:如果 options/valueEnum 为空,Select 也可能不显示内容。

  3. renderFormItem 返回值:必须返回有效的 React 元素,不能返回 null/undefined/false,否则表单项不会渲染 源码参考

  4. fieldProps 合并方式:确保你在 renderFormItem 里调用 defaultRender 时,fieldProps 是这样合并的:

    renderFormItem: (item, config, form) => {
      return config.defaultRender({
        ...item,
        fieldProps: {
          ...item.fieldProps,
          ...config.fieldProps,
        },
      });
    }
    
  5. 环境/生命周期问题:有些情况下(比如 ModalForm、DrawerForm、React StrictMode),自定义 renderFormItem 可能会因为生命周期或 ref 问题导致渲染异常 相关讨论

如果这些都没问题,建议你在 codesandbox 里确认 value 是数组、options/valueEnum 有内容,并且 renderFormItem 返回的是有效元素。如果还是不行,可以尝试去掉 renderFormItem 或只用最简单的 defaultRender,看能否正常渲染,逐步缩小问题范围。

如果你有具体的代码片段或更详细的报错信息,可以贴出来,我可以帮你进一步定位!

To reply, just mention @dosu.


How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Chat with Dosu Join Discord Share on X

dosubot[bot] avatar Aug 20 '25 03:08 dosubot[bot]