ProComponents 表单上传组件渲染异常问题解析

问题现象

在使用 ProComponents 的 ModalForm 组件配合 ProFormUploadButton 或其他上传组件时，用户反馈在提交表单或关闭弹窗时，文件列表会出现重复渲染的文件节点，表现为文件项闪现重复内容。

问题根源分析

经过深入排查，发现问题主要出现在以下场景：

1. 数据回填场景：当 ModalForm 需要显示并编辑已有数据时，如果上传组件接收到的文件数据缺少唯一标识符，会导致渲染异常。

2. 组件重新渲染：ModalForm 在提交或关闭时触发的重新渲染过程中，上传组件无法正确识别文件项的唯一性。

3. 关键缺失：未给每个文件分配 uid（唯一标识符）是导致此问题的直接原因。React 在渲染列表时需要 key 来识别元素，上传组件内部同样依赖 uid 来管理文件状态。

解决方案

要彻底解决此问题，开发者需要确保：

1. 为文件数据添加 uid：在回填文件数据时，必须为每个文件对象添加唯一的 uid 属性。这类似于 React 列表渲染中的 key 属性。

2. 数据规范化：在将文件数据传递给上传组件前，应该先对数据进行处理，确保每个文件对象都有 uid 字段。

// 示例：规范化文件数据
const normalizedFiles = originalFiles.map(file => ({
  ...file,
  uid: file.uid || `file_${Math.random().toString(36).substr(2, 9)}`
}));

3. 保持 uid 稳定性：在组件重新渲染时，应该保持相同文件的 uid 不变，避免因 uid 变化导致的重新渲染问题。

最佳实践建议

1. 初始化处理：在组件挂载时或接收新 props 时，对文件数据进行规范化处理。

2. 状态管理：考虑将文件数据及 uid 保存在组件状态中，避免每次渲染都重新生成。

3. 表单重置处理：在 ModalForm 关闭或提交后重置表单时，注意保持文件 uid 的一致性。

4. 性能优化：对于大量文件上传场景，建议使用更高效的 uid 生成方式，如基于文件内容的哈希值。

总结

ProComponents 的上传组件在配合 ModalForm 使用时，文件列表渲染异常的问题通常源于文件数据缺少唯一标识符。通过为文件数据添加稳定的 uid 属性，可以确保组件在各种交互场景下都能正确渲染。这不仅是解决当前问题的方案，也是处理类似文件列表渲染问题的一般性原则。