给HandleFiles加Redux connect(mapDispatchToProps)后报TypeError问题排查

你出现报错的核心原因是对Redux connect 高阶组件的作用逻辑理解有误：

• connect 是专门用来包装React组件的高阶函数，包裹后返回的是标准React组件，不再是你原来定义的普通工具函数。
• 你将HandleFiles用connect包裹后，直接在FilePicker里以普通函数形式调用HandleFiles(file)，传参逻辑完全不匹配：
  被connect包裹后的组件只会接收props对象作为入参，你原来的HandleFiles拿到的第一个参数是包含setSnackbarAction、setEnqueueSnackbarAction的props对象，而不是你传入的file对象，所以代码里访问item.size的时候就会抛出类型错误。

你可以二选一：

方案1：移除HandleFiles的connect绑定 #

如果HandleFiles是纯工具函数，不需要作为组件渲染，直接去掉connect相关代码即可，需要用到Redux dispatch的场景，直接把dispatch作为参数传入函数：

1. 删除HandleFiles.jsx里的mapDispatchToProps定义和最后一行connect包裹导出的代码，直接导出原函数
2. 调整HandleFiles的参数，增加dispatch入参：

const HandleFiles = (item, dispatch) => {
  // 内部用到action的地方直接用传入的dispatch调用即可
}

3. 在FilePicker调用时传入dispatch：

const sha = await HandleFiles(file, dispatch);

方案2：调整HandleFiles的参数和调用逻辑适配connect #

如果你需要保留connect注入Redux方法的逻辑，按下面修改：

1. 打开HandleFiles里注释的参数写法，从props中解构入参：

const HandleFiles = ({ item, setSnackbarAction, setEnqueueSnackbarAction }) => {
  // 原有逻辑不变
}

2. 在FilePicker调用时，把参数包装为props对象传入：

const sha = await HandleFiles({ item: file });

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