ReactJS TypeError: 无法将类作为函数调用问题求助（React Router场景）

根据你给出的代码和错误提示，这个问题的核心是你试图把一个类当作普通函数来调用，结合你的业务场景，最有可能的问题出在AddPost这个action创建函数上，下面是具体的排查和修复步骤：

1. 重点检查AddPost action的定义 #

错误提示明确指向“调用类作为函数”，如果你的AddPost是用class关键字定义的（而非普通函数/箭头函数），直接调用AddPost(post)就会触发这个错误。正确的action创建函数应该是函数式的：

// 正确写法：函数式action创建函数
export const AddPost = (post) => {
  return {
    type: 'ADD_POST',
    payload: post
  };
};

如果你之前错误地把AddPost写成了类，比如下面这种写法，就会触发报错——因为类需要用new关键字实例化，而不是直接当作函数调用：

// 错误写法：不要用class定义action创建函数
export class AddPost {
  constructor(post) {
    this.type = 'ADD_POST';
    this.payload = post;
  }
}

2. 确认组件的导出方式 #

你的Add组件使用了connect高阶组件，但要确保你最终导出的是被connect包装后的组件，而非原始的函数组件：

// 正确导出方式：导出connect处理后的组件
const ConnectedAdd = connect()(Add);
export default ConnectedAdd;

// 或者简化写法
export default connect()(Add);

如果没有正确导出connect后的组件，可能会导致props中的dispatch无法正常工作，间接引发连锁错误。

3. 排查PostsForm组件（备选排查项） #

如果上面两步都没问题，再检查PostsForm组件：确保它的导出和引用是正确的。如果你把PostsForm定义为类组件，但在引入时错误地当作函数调用（不过这种情况的错误提示通常会指向PostsForm的位置）。比如确认PostsForm的导出是这样的：

// PostsForm.js中的正确导出（类组件场景）
class PostsForm extends React.Component {
  // ...组件逻辑
}
export default PostsForm;

快速验证方法 #

你可以临时修改onSubmit中的代码，替换AddPost的调用，看看错误是否消失：

onSubmit={(post) => {
  // 先替换成一个简单的action对象，测试是否报错
  props.dispatch({
    type: 'ADD_POST',
    payload: post
  });
  props.history.push('/');
}}

如果这样错误消失，就百分百确认是AddPost的定义问题了。

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