🐛[BUG] ProFormUploadButton报错

[coyzeng]

提问前先看看：

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

🐛 bug 描述

📷 复现步骤

引用组件就直接报错

🏞 期望结果

💻 复现代码

© 版本信息

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

🚑 其他信息

[dosubot]

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

你的报错 (fileList || []).forEach is not a function 是因为 ProFormUploadButton 传递给底层 Upload 组件的 fileList（或 value）不是数组类型。Upload 组件内部会直接对这个值调用 forEach，如果不是数组就会抛出这个错误。常见原因包括：从数据库读取的是字符串、undefined 或 null，没有转换成数组，或者表单重置时值变成了非数组类型（比如用 Umi 的 model 时）相关讨论 源码实现。

解决方法：

1. 保证传给 ProFormUploadButton 的 value 或 fileList 始终是数组类型（即使为空也要用 []）。
2. 如果你用的是表单受控模式，表单字段的初始值和重置值都要是数组。
3. 如果你从数据库拿到的是字符串，记得用 JSON.parse 或其它方式转换成数组。
4. 所有 Upload 相关的 props（比如 fileList、headers 等）都应该放在 fieldProps 里传递。

示例代码：

<ProFormUploadButton
  name="images"
  label="图片"
  max={6}
  value={imagesArray} // 必须是数组
  fieldProps={{
    listType: 'picture-card',
    onChange: (info) => {
      // info.fileList 也是数组
      setImagesArray(info.fileList);
    },
  }}
  action="/api/upload"
/>

关于 React 的 key 警告：这是你渲染列表（比如 table 的 tbody）时，每个子元素都需要有唯一的 key 属性，和 fileList 报错无关。只要在 map 渲染时加上 key={唯一值} 即可。

参考：fileList 必须为数组的官方说明和社区讨论
源码实现：ProFormUploadButton 如何处理 fileList

To reply, just mention @dosu.

---

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

   

[leshalv]

贴一下代码