ReactJS中默认导入函数正常但解构命名导入返回undefined问题求助

你当前采用的是ES6模块的默认导出语法，导出的是一个包含所有函数的整体对象。而import { func } from '../../module'这种写法是用于匹配模块的命名导出项，并不会自动解构默认导出的对象，这就是你第二种写法拿到undefined、调用时报类型错误的核心原因。

你可以根据自己的项目情况二选一：

• 方案一：不修改现有导出逻辑，仅调整导入写法
  先导入默认对象再手动解构即可：

  import module from '../../module'
  const { func } = module
  console.log(func) // 正常输出目标函数
  

  该方案改造成本极低，不需要改动原有导出配置，也不会影响其他已经引用了该模块的代码。

• 方案二：修改导出逻辑为命名导出，适配解构导入写法
  将原来的export default改为命名导出：

  const func = (param1, param2) => {
    // 原有逻辑
    return result
  };
  
  const func1 = (param1, param2) => {/* 原有逻辑 */}
  // 其他函数定义省略
  
  // 替换原来的export default
  export {
    func,
    func1,
    func2,
    // 其他要导出的函数
  }
  

  调整完成后就可以直接用你想要的解构导入写法了：

  import { func } from '../../module'
  console.log(func) // 正常输出目标函数
  

  该方案更符合ES6模块的规范写法，可读性更高。

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