未捕获的TypeError:无法读取Draft.js中未定义的属性'isInCompositionMode'

时间:2018-10-25 12:54:25

标签: javascript reactjs redux react-redux draftjs

我遇到以下错误:

  

未捕获的TypeError:无法读取未定义的属性'isInCompositionMode'

何时 我尝试在我的React项目中使draft.js与redux一起使用,我正在遵循非常方便的教程

https://reactrocket.com/post/draft-js-and-redux/

它工作正常,但是当我尝试在单独的文件夹中创建redux存储和reducer以及在单独的文件中创建组件时,出现这种错误

My code in codesandbox

Index.js

const rootReducer = combineReducers({
  au: authReducer,
  editorState: draftReducer
});

const logger = store => {
  return next => {
    return action => {
      console.log("[Middleware] Dispatching", action);
      const result = next(action);
      console.log("[Middleware] next state", store.getState());
      return result;
    };
  };
};
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(logger, thunk))
);

function App() {
  return (
    <Provider store={store}>
      <Main />
    </Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

收割者

import { EditorState } from "draft-js";

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

const reducer = (state = defaultState, { editorState, type }) => {
  if (type === "UPDATE_EDITOR_STATE") {
    return {
      ...state,
      editorState
    };
  }
  return state;
};

export default reducer;

和主要组件

class Main extends Component {
  render() {
    return (
      <Editor
        editorState={this.props.editorState}
        onChange={this.props.onSaveEditorState}
        textDirectionality="RTL"
        placeholder="Type Here "
      />
    );
  }
}

const mapStateToProps = state => {
  return {
    editorState: state.editorState.editorState
  };
};

const mapDispatchToProps = dispatch => ({
  onSaveEditorState: editorState => {
    dispatch({
      type: "UPDATE_EDITOR_STATE",
      payload: editorState
    });
  }
});

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

0 个答案:

没有答案