ReactionJS - TypeError: Невозможно вызвать класс как функцию - PullRequest
Новая
       6

ReactionJS - TypeError: Невозможно вызвать класс как функцию

0 голосов
/ 05 мая 2018

Я делаю приложение реагирования, в котором я использую реагирующий маршрутизатор. Теперь у меня есть 4 ссылки / панель инструментов / добавить / помочь / изменить /: идентификатор . 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>
    );
  }
}

1 Ответ

0 голосов
/ 05 мая 2018

Уже есть похожий вопрос по SO .

Вы, вероятно, забыли расширить React.Component вроде: 

class PostsForm extends React.Component { ...

или, например, вы используете Route неверным образом (похоже на трассировку стека) 

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

вместо: 

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