React中调用与组件参数同名的外部函数报错：TypeError: getCurrentProfile is not a function 解决方法咨询

嘿，我来帮你排查这个问题！你遇到的错误本质是命名冲突加上可能的Redux映射问题，咱们一步步拆解：

问题根源 #

你同时做了两件事：

1. 从../actions/profile导入了名为getCurrentProfile的函数
2. 在Dashboard组件的参数里也声明了同名的getCurrentProfile props

在JavaScript中，函数参数的作用域优先级高于外部导入的变量，所以你在useEffect里调用的getCurrentProfile()，实际是在尝试调用props里的那个——但如果这个props没有被正确通过Redux的connect或者其他方式注入，它就是undefined，自然会抛出TypeError。

解决方案 #

根据你的使用场景，有两种常见的修复方式：

方式1：使用React-Redux的useDispatch钩子（推荐函数组件） #

如果你用的是函数组件和Redux Toolkit/React-Redux v7+，直接用useDispatch来分发action，不用把action creator放到props里：

// 导入useDispatch钩子
import { useDispatch } from 'react-redux';
import { getCurrentProfile } from '../actions/profile';
// 移除props里的getCurrentProfile
const Dashboard = ({ auth: { user } }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    // 用dispatch调用你的action creator
    dispatch(getCurrentProfile());
  }, [dispatch]); // 把dispatch加到依赖数组里

  return(
    <Fragment>
      <h1>Dashboard</h1>
      <i className='das fa-user'></i>
      <p>Welcome {user && user.name}</p>
    </Fragment>
  );
};

方式2：重命名props避免冲突（适合用connect的场景） #

如果你习惯用connect高阶组件，在映射action的时候给props重命名，避免和导入的函数同名：

import { connect } from 'react-redux';
import { getCurrentProfile } from '../actions/profile';

// 用新的名称接收props，比如fetchProfile
const Dashboard = ({ fetchProfile, auth: { user } }) => {
  useEffect(() => {
    fetchProfile();
  }, [fetchProfile]);

  return(
    <Fragment>
      <h1>Dashboard</h1>
      <i className='das fa-user'></i>
      <p>Welcome {user && user.name}</p>
    </Fragment>
  );
};

// 映射action时重命名
const mapDispatchToProps = {
  fetchProfile: getCurrentProfile
};

// 连接组件到Redux
export default connect(null, mapDispatchToProps)(Dashboard);

额外检查点 #

• 确认../actions/profile里的getCurrentProfile是用export（不是export default）导出的，不然导入会出错
• 如果这不是Redux action，只是普通工具函数：直接移除组件参数里的getCurrentProfile，确保导入路径正确，然后直接调用即可

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