reactJS-TypeError:无法将类作为函数调用

我正在制作react应用程序，其中我正在使用react路由器。现在我有4个链接/仪表板/添加/帮助/编辑/：id

。无论何时进入

/add，我都会遇到错误。请检查下面给出的代码

 import React from 'react';
import { connect } from 'react-redux';
import PostsForm from './PostsForm';
import { AddPost } from '../actions/posts';

const Add = (props) => (
  <div>
    <h1>Add Expense</h1>
    <PostsForm
      onSubmit={(post) => {
        props.dispatch(AddPost(post));
        props.history.push('/');
      }}
    />
  </div>
);

export default connect()(Add);

这是邮政编码

import React from "react";
import moment from "moment";

import { SingleDatePicker } from "react-dates";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";

export default class PostsForm extends React.Component {
  state = {
    title: "",
    post: "",
    date: moment(),
    focused: false,
    error: ""
  };

  onTitle = e => {
    var title = e.target.value;

    this.setState(() => {
      return {
        title
      };
    });
  };

  onPost = e => {
    var post = e.target.value;

    this.setState(() => {
      return {
        post
      };
    });
  };

  onDate = date => this.setState({ date });

  onFocus = ({ focused }) => this.setState({ focused });

  onSubmit = e => {
    e.preventDefault();

    if (this.state.title === "" && this.state.post === "") {
      this.setState(() => ({
        error: "please fill on the blanks."
      }));
    } else {
      this.setState(() => ({
        error: ""
      }));

      this.props.onSubmit({
        title: this.state.title,
        post: this.state.post,
        date: this.state.date.valueOf()
      });
    }
  };

  render() {
    return (
      <div>
        {!this.state.error ? "" : this.state.error}
        <form onSubmit={this.onSubmit}>
          <input
            type="text"
            placeholder="Title"
            onChange={this.onTitle}
            value={this.state.title}
          />
          <SingleDatePicker
            date={this.state.date} // momentPropTypes.momentObj or null
            onDateChange={this.onDate} // PropTypes.func.isRequired
            focused={this.state.focused} // PropTypes.bool
            onFocusChange={this.onFocus} // PropTypes.func.isRequired
            numberOfMonths={1}
            isOutsideRange={() => false}
          />
          <textarea
            placeholder="Type here"
            value={this.state.post}
            onChange={this.onPost}
          />

          <button>Submit</button>
        </form>
      </div>
    );
  }
}

从“React”导入React；
从“时刻”中导入时刻；
从“反应日期”导入{SingleDatePicker}；
导入“反应日期/初始化”；
导入“react dates/lib/css/_datepicker.css”；
导出默认类PostsForm扩展React.Component{
状态={
标题：“，
职位：“，
日期：矩（），
重点：错，
错误：“
};
onttitle=e=>{
var title=e.target.value；
此.setState（（）=>{
返回{
标题
};
});
};
onPost=e=>{
var post=e.目标值；
此.setState（（）=>{
返回{
邮递
};
});
};
onDate=date=>this.setState（{date}）；
onFocus=（{focused}）=>this.setState（{focused}）；
onSubmit=e=>{
e、 预防默认值（）；
if（this.state.title==“”&this.state.post==“”）{
此.setState（（）=>({
错误：“请填空。”
}));
}否则{
此.setState（（）=>({
错误：“
}));
这个.props.onSubmit({
标题：this.state.title，
post:this.state.post，
日期：this.state.date.valueOf（）
});
}
};
render（）{
返回(
{！this.state.error？“：this.state.error}
假}
/>
提交
);
}
}

上已经有一个类似的问题

您可能忘记扩展React。组件，如：

class PostsForm extends React.Component { ...

或者以错误的方式使用

Route

（看起来像是从堆栈跟踪）

而不是：

<Route path="/" component={Add} />    

显示你的帖子表单以及如何使用add添加你的

AddPost

代码。可能重复Hello Gentler，我正在使用render，这就是我出错的原因。问题已经解决。感谢兄弟对我的问题提供意见。祝你过得愉快我已经在使用render了。所以，在这里，我必须使基于类的组件正确吗？@YashrajBasan您应该使用

组件

而不是

渲染

@Tomasz Mularczyk谢谢先生，我必须使用组件。请问渲染和组件的区别是什么？谢谢你的回答。祝你度过愉快的一天

<Route path="/" render={Add} />

<Route path="/" component={Add} />