Question

我正在制作反应应用程序，我现在在这里使用反应路由器我有4个链接/仪表板/添加/帮助/编辑/：id . whenever i go to /添加我收到错误。检查下面给出的代码。

 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);

当我转到/add时，我收到此错误。在这里你可以看到我是3个错误首先我认为与connect()函数相关，第二个与路由相关，第三个与connect()相同

Uncaught TypeError: Cannot call a class as a function
at _classCallCheck (connectAdvanced.js:3)
at Connect (connectAdvanced.js:106)
at Route.render (Route.js:104)
at finishClassComponent (react-dom.development.js:8389)
at updateClassComponent (react-dom.development.js:8357)
at beginWork (react-dom.development.js:8982)
at performUnitOfWork (react-dom.development.js:11814)
at workLoop (react-dom.development.js:11843)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at replayUnitOfWork (react-dom.development.js:11318)
at renderRoot (react-dom.development.js:11885)
at performWorkOnRoot (react-dom.development.js:12449)
at performWork (react-dom.development.js:12370)
at performSyncWork (react-dom.development.js:12347)
at interactiveUpdates (react-dom.development.js:12597)
at interactiveUpdates (react-dom.development.js:1958)
at dispatchInteractiveEvent (react-dom.development.js:4259)
index.js:2178 The above error occurred in the <Route> component:
  in Route (at AppRouter.js:20)
  in Switch (at AppRouter.js:17)
  in div (at AppRouter.js:15)
  in Router (created by BrowserRouter)
  in BrowserRouter (at AppRouter.js:14)
  in AppRouter (at index.js:34)
  in Provider (at index.js:33)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit fb.me/react-error-boundaries to learn more about error" boundaries.
__stack_frame_overlay_proxy_console__ @ index.js:2178
react-dom.development.js:12431 Uncaught TypeError: Cannot call a class as a function
    at _classCallCheck (connectAdvanced.js:3)
    at Connect (connectAdvanced.js:106)
    at Route.render (Route.js:104)
    at finishClassComponent (react-dom.development.js:8389)
    at updateClassComponent (react-dom.development.js:8357)
    at beginWork (react-dom.development.js:8982)
    at performUnitOfWork (react-dom.development.js:11814)
    at workLoop (react-dom.development.js:11843)
    at renderRoot (react-dom.development.js:11874)
    at performWorkOnRoot (react-dom.development.js:12449)
    at performWork (react-dom.development.js:12370)
    at performSyncWork (react-dom.development.js:12347)
    at interactiveUpdates (react-dom.development.js:12597)
    at interactiveUpdates (react-dom.development.js:1958)
    at dispatchInteractiveEvent (react-dom.development.js:4259)

这是PostsForm的代码

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>
    );
  }
}

Answer 1

SO上已有类似问题。

您可能忘记将React.Component扩展为：

class PostsForm extends React.Component { ...

或者以错误的方式使用Route（例如，似乎来自堆栈跟踪）

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

而不是：

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

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

1 个答案: