正确处理Ant Design Upload的fileList，避免Uncaught TypeError错误

2023-09-10 09:01:13

在前端开发中，使用Ant Design的Upload组件上传文件时，可能会遇到Uncaught TypeError: items.map is not a function错误。本文将分析导致此错误的原因并提供解决方案。

Ant Design的Upload组件提供了一个fileList属性，它是一个受控属性，用于存储上传的文件列表。当用户选择文件进行上传时，fileList会自动更新。但是，在某些情况下，可能需要手动更新fileList。

造成上述错误的原因是，在上传一个文件后，上传组件会生成一个新的fileList，但没有将其回传给父组件。因此，父组件持有的fileList仍然是旧的，导致调用map方法时出现错误。

为了解决这个问题，需要确保在每次上传文件后，都会将新的fileList回传给父组件。一种方法是在onChange事件处理函数中更新fileList：

import { Upload } from 'antd';

const App = () => {
  const [fileList, setFileList] = useState([]);

  const onChange = ({ fileList: newFileList }) => {
    setFileList(newFileList);
  };

  return <Upload onChange={onChange} />;
};

通过这种方式，父组件可以始终保持最新版本的fileList，从而避免出现错误。

此外，还可以通过beforeUpload事件处理函数，在文件上传之前验证和修改fileList：

const beforeUpload = (file) => {
  // 验证文件类型或大小
  if (file.type !== 'image/jpeg') {
    message.error('只能上传图片文件');
    return false;
  }

  // 修改文件名称或其他属性
  file.name = file.name.replace(/\s/g, '_');

  return true;
};