this.props.editorState.isInCompositionMode 不是 react 的 Draft.js 中的函数错误答案

【问题标题】：this.props.editorState.isInCompositionMode is not a function error in Draft.js of reactthis.props.editorState.isInCompositionMode 不是 react 的 Draft.js 中的函数错误
【发布时间】：2019-11-08 14:04:59
【问题描述】：

我的目标是使用从 DB 中检索到的 HTML 来初始化 Draft.js 编辑器。每当我尝试初始化编辑器时，它都会抛出一个错误：

this.props.editorState.isInCompositionMode is not a function

为了将 Draft.js 内容转换为 HTML，我使用了 draft-js-export-html，为了转换回 editorState 对象，我使用了 draft-js-import-html。

我在下面提到了我使用过的代码：

Editor.js

    constructor(props) {
        super(props);

        this.state = {
            editorState: this.props.setEditorState,
         }
    }
    render(
       <Editor
            placeholder={"Please give details of news..."}
            editorState={this.state.editorState}
            handleKeyCommand={this.handleKeyCommand}
            keyBindingFn={this.keyBindingFunction}
            onChange={this.onChange} />
       );

MainBody.js

<EditComp setEditorState={stateFromHTML(response.data[i].htmlDesc)} />

我在控制台中遇到的错误如下：

Uncaught TypeError: this.props.editorState.isInCompositionMode is not a function
    at DraftEditor._showPlaceholder (static/js/0.chunk.js:80878)
    at DraftEditor._renderPlaceholder (static/js/0.chunk.js:80882)
    at DraftEditor.render (static/js/0.chunk.js:80943)
    at finishClassComponent (static/js/0.chunk.js:153826)
    at updateClassComponent (static/js/0.chunk.js:153781)
    at beginWork$1 (static/js/0.chunk.js:155510)
    at HTMLUnknownElement.callCallback (static/js/0.chunk.js:135702)
    at Object.invokeGuardedCallbackDev (static/js/0.chunk.js:135751)
    at invokeGuardedCallback (static/js/0.chunk.js:135804)
    at beginWork$$1 (static/js/0.chunk.js:161088)
    at performUnitOfWork (static/js/0.chunk.js:160014)
    at workLoopSync (static/js/0.chunk.js:159987)
    at performSyncWorkOnRoot (static/js/0.chunk.js:159576)
    at static/js/0.chunk.js:147628
    at unstable_runWithPriority (static/js/0.chunk.js:187261)
    at runWithPriority$2 (static/js/0.chunk.js:147574)
    at flushSyncCallbackQueueImpl (static/js/0.chunk.js:147623)
    at flushSyncCallbackQueue (static/js/0.chunk.js:147611)
    at discreteUpdates$1 (static/js/0.chunk.js:159730)
    at discreteUpdates (static/js/0.chunk.js:136807)
    at dispatchDiscreteEvent (static/js/0.chunk.js:141282)

我犯了什么错误吗？抛出该错误的原因是什么？

【问题讨论】：

标签： reactjs draftjs

【解决方案1】：

尝试使用控制台日志查看 stateFromHTML(response.data[i].htmlDesc) 的结果。

正如我所见，您期望它是一个具有 isInCompositionMode 函数的对象，它显然不包含该函数。

尝试找出调用 isInCompositionMode 的位置。

从命名 setEditorState 表明它是一个函数，并且您将其设置为您声明“editorState”（不调用它）因此 editorState 是一个不能像对象一样访问的函数。

一般来说，我会说您提供的数据不足，无法提供答案。

【讨论】：

我已编辑问题并添加了错误。 isInCompositionMode() 方法是 React 的一部分，不在我的项目中。

【解决方案2】：

只缺少一件事。 EditorState.createWithContent() 需要。 MainBody.js文件代码编辑如下代码：

var contentState = stateFromHTML(this.props.setEditorState);

this.state = {
editorState: EditorState.createWithContent(contentState)
}

【讨论】：