🐛[BUG] 使用BetaSchemaForm时, 当指定renderFormItem,返回defaultRender中包含mode: multiple时表单绘制不出来
提问前先看看:
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]
🚑 其他信息
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
@dosu 看起来不是这样,即使传递了fieldProps, 界面也绘制不出
你的情况确实比较特殊,代码和源码分析显示:只要 fieldProps(包含 mode: 'multiple')正确合并并传递,Select 理论上应该能正常渲染多选模式。如果还是渲染不出来,建议你重点排查以下几个点:
-
value 必须是数组:antd 的 Select 组件在多选模式下,value 必须是数组,否则不会渲染(甚至会报错)源码参考。
-
options 或 valueEnum 是否有值:如果 options/valueEnum 为空,Select 也可能不显示内容。
-
renderFormItem 返回值:必须返回有效的 React 元素,不能返回 null/undefined/false,否则表单项不会渲染 源码参考。
-
fieldProps 合并方式:确保你在 renderFormItem 里调用 defaultRender 时,fieldProps 是这样合并的:
renderFormItem: (item, config, form) => { return config.defaultRender({ ...item, fieldProps: { ...item.fieldProps, ...config.fieldProps, }, }); } -
环境/生命周期问题:有些情况下(比如 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