react-dropzone的onDrop触发两次及出现Proxy对象问题咨询

我之前用react-dropzone做文件上传时也碰到过一模一样的情况，帮你梳理下原因和解决办法：

为什么会出现Proxy对象？ #

react-dropzone的onDrop回调是多参数设计：第一个参数是拖拽选中的已接受文件数组，第二个是被拒绝的文件信息数组，第三个则是原生的拖拽事件对象。而在React开发模式下，为了实现事件复用和开发时的警告提示，React会把原生事件对象用Proxy包装起来——这就是你看到的第二条日志里的Proxy对象。

大概率是你的回调函数不小心打印了所有传入的参数（比如用了console.log(arguments)或者没限制参数范围），所以才会把这个被Proxy包装的事件对象也输出出来。

怎么消除这个Proxy日志？ #

只需要在onDrop回调里明确只处理第一个参数即可，忽略后面不需要的参数：

// 正确写法：只获取需要的acceptedFiles参数
const onDrop = (acceptedFiles) => {
  console.log(acceptedFiles); // 现在只会打印拖拽的文件数组，不会出现Proxy
  // 这里把文件数组传给Redux action，比如：
  // dispatch(setUploadFiles(acceptedFiles));
};

// 错误写法（会打印多余参数）：
// const onDrop = (...args) => {
//   args.forEach(arg => console.log(arg)); // 会把文件数组、拒绝列表、Proxy事件对象都打印出来
// };

另外，如果是在Redux的action处理中不小心传递了额外参数，也要确保你的action creator只接收文件数组作为入参，不要把回调里的其他参数（比如事件对象）传进去，避免不必要的日志和数据冗余。

内容的提问来源于stack exchange，提问作者Almaron