Reactjs 使用草稿JS道具问题设置React Redux

我不熟悉React，我正在尝试将DraftJS与React和Redux集成。我收到一条关于传递道具的错误消息，我不确定为什么没有传递道具。因此，我想更大的问题是如何让DraftJS进行反应和重新编译，更直接的问题是这个错误消息

这是你的电话号码

这是我收到的错误消息

warning.js:33 Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
in Route (created by AppRouter)
in AppRouter
in Provider

这是批准的文件

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory'
import PostsIndex from '../components/posts/PostsIndex';
import PostNew from '../components/posts/PostNew';
import PostEdit from '../components/posts/PostEdit';
import PostShow from '../components/posts/PostShow';

export const history = createHistory();

const AppRouter = () => (
  <Router history={history}>
    <div>
      <Switch>
        <Route path="/" component={PostsIndex} exact={true} />
        <Route path="/posts/new" component={PostNew} exact={true} />
        <Route path="/posts/:id/edit" component={PostEdit} exact={true} />
        <Route path="/posts/:id" component={PostShow} exact={true} />
      </Switch>
    </div>
  </Router>
);

export default AppRouter;

postsReducer中的console.log向我显示了这一点

PostNew {props: undefined, context: undefined, refs: {…}, updater: {…}}

这是Posts操作文件

export const startAddPost = (editorState) => ({
 type: 'START_ADD_POST',
 editorState
});

这是商店的档案

import { createStore, combineReducers } from 'redux';
import postsReducer from '../reducers/posts';

export default () => {
  const store = createStore(
    combineReducers({
      posts: postsReducer
    })
  ); 
  return store;
};

这是NewPost组件

import React from 'react';
import { connect } from 'react-redux';
import { startAddPost } from '../../actions/posts';
import PostForm from './PostForm';

export class PostNew extends React.Component {
  render() {
    return (
      <div>
        <h1>New Post</h1>
        <PostForm />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  console.log("state", state);
  return {
    post: state
  }
}

const mapDispatchToProps = (dispatch) => ({
  startAddPost: (editorState) => dispatch(startAddPost(post))
});

export default connect(mapStateToProps, mapDispatchToProps)(PostNew);

console.log('PostNew', new PostNew());

import React from 'react';
import {Editor, EditorState} from 'draft-js';

export default class PostForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
      <Editor editorState={this.state.editorState} onChange={this.state.onChange} />
    )
  }
}

这是PostForm组件

import React from 'react';
import { connect } from 'react-redux';
import { startAddPost } from '../../actions/posts';
import PostForm from './PostForm';

export class PostNew extends React.Component {
  render() {
    return (
      <div>
        <h1>New Post</h1>
        <PostForm />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  console.log("state", state);
  return {
    post: state
  }
}

const mapDispatchToProps = (dispatch) => ({
  startAddPost: (editorState) => dispatch(startAddPost(post))
});

export default connect(mapStateToProps, mapDispatchToProps)(PostNew);

console.log('PostNew', new PostNew());

import React from 'react';
import {Editor, EditorState} from 'draft-js';

export default class PostForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
      <Editor editorState={this.state.editorState} onChange={this.state.onChange} />
    )
  }
}

从“React”导入React；
从“草稿js”导入{Editor，EditorState}；
导出默认类PostForm扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={editorState:editorState.createEmpty（）}；
this.onChange=（editorState）=>this.setState（{editorState}）；
}
render（）{
返回(
)
}
}