React项目导出命名箭头函数报错：Object(...) is not a function

遇到这个报错我太熟了！大概率是导出导入环节出了问题，或者Context的定义有遗漏，咱们一步步排查解决：

可能的原因及解决方案 #

1. 确认PrefixContext是否正确创建 #

这个高阶组件依赖PrefixContext.Consumer，如果Context本身没正确初始化，会间接导致withPrefix无法正常工作，表现为调用时报错。

要确保在file1.js里先创建Context：

// file1.js 顶部添加
import React, { createContext } from 'react';
const PrefixContext = createContext('default-prefix'); // 可设置默认前缀作为 fallback

2. 检查导入路径是否准确 #

file2.js里的/path/to/file1.js很可能是路径错误导致导入的withPrefix是undefined，调用undefined当然会报“不是函数”的错。

• 改用相对路径测试，比如如果file2和file1在同一目录下，就写import { withPrefix } from './file1.js'；如果file1在上一级目录的components文件夹，就写import { withPrefix } from '../components/file1.js'。
• 可以在file2里先打印导入的结果，确认是否是函数：

  import { withPrefix } from './file1.js';
  console.log('withPrefix:', withPrefix); // 如果输出是函数就没问题，否则检查路径
  

3. 核对导出/导入的语法 #

虽然你的代码里是命名导出，但还是要再确认：

• file1.js里是命名导出：export const withPrefix = ...，这个是对的。
• file2.js里必须用大括号包裹导入：import { withPrefix } from ...，不能写成默认导入import withPrefix from ...（除非你把file1改成默认导出）。

如果不小心把file1改成了默认导出：

// 错误示例（如果这么写，导入就要改）
export default withPrefix;

那对应的导入应该去掉大括号：import withPrefix from './file1.js'。

4. 避免命名冲突或重复导出 #

确保file1.js里没有其他同名的withPrefix导出，也没有在其他文件里覆盖了这个变量。

修复后的完整示例 #

file1.js #

import React, { createContext } from 'react';

// 正确创建Context
const PrefixContext = createContext('default-prefix');

export const withPrefix = (Component) => (props) => (
  <PrefixContext.Consumer>
    {prefix => <Component {...props} prefix={prefix}/>}
  </PrefixContext.Consumer>
)

// 配套的Provider，用于传递prefix值
export const PrefixProvider = ({ prefix, children }) => (
  <PrefixContext.Provider value={prefix}>
    {children}
  </PrefixContext.Provider>
)

file2.js #

import React, { Fragment } from 'react';
import { Button, Link } from '你的UI库路径'; // 确保导入Button和Link
import { withPrefix } from './file1.js'; // 正确的相对路径

let Toolbar = withPrefix(({prefix}) => (
  <Fragment>
    <div style={{flexGrow: 1}}>
      <Button><Link to={`${prefix}/create`}>Create</Link></Button>
    </div>
  </Fragment>
))

export default Toolbar;

注意事项 #

使用Toolbar的时候，需要用PrefixProvider包裹它，才能让Consumer拿到prefix值：

// 比如在App.js里
import { PrefixProvider } from './file1.js';
import Toolbar from './file2.js';

function App() {
  return (
    <PrefixProvider prefix="/admin">
      <Toolbar />
    </PrefixProvider>
  )
}

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