Question

我刚接触React，我正在尝试将DraftJS与React和Redux集成。我收到关于传递道具的错误消息，我不知道为什么没有传递道具。所以我想更大的问题是如何让DraftJS工作React和Redux，更直接的问题就是这个错误信息。

这是我收到的错误消息

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

这是AppRouter文件

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;

这是Posts Reducer文件

import { EditorState } from 'draft-js';

const defaultState = {
  editorState: EditorState.createEmpty(),
};

const postsReducer = (state=defaultState, action) => {
console.log('redux action: ', action.payload);
switch(action.type){
case 'START_ADD_POST':
  return {
    ...state,
    action
  }
  default: 
    return state
  }
};

export default postsReducer;

postsReducer中的console.log向我展示了这个

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

这是帖子行动档案

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

这是PostNew上的console.log返回的内容

state 
{posts: {…}}
posts
:
editorState
:
EditorState
_immutable
:
Record {_map: Map}
__proto__
:
Object
__proto__
:
Object
__proto__
:
Object

这是PostForm组件

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

使用Draft-JS道具问题设置React-Redux

0 个答案: