draft-js无法读取未定义的属性'getIn'（getUpdatedSelectionState）

Question

我在 draft-js-plugins-editor

draft-js 时出现此错误

STRANGE BEAVAVIOR：它只会发生，当我在写完后重新聚焦到第一行编辑器时，试图设置为例如。第一行的标题为H1，它改变了以前的聚焦线

错误：Uncaught TypeError: Cannot read property 'getIn' of undefined

完全错误：

Uncaught TypeError: Cannot read property 'getIn' of undefined
    at getUpdatedSelectionState (getUpdatedSelectionState.js?a009439:34)
    at getDraftEditorSelectionWithNodes (getDraftEditorSelectionWithNodes.js?a009439:37)
    at getDraftEditorSelection (getDraftEditorSelection.js?a7f8e9b:35)
    at editOnSelect (editOnSelect.js?a7f8e9b:32)
    at DraftEditor.react.js?f8ee1ff:148
    at HTMLUnknownElement.callCallback (react-dom.development.js?5f39724:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?5f39724:581)
    at Object.invokeGuardedCallback (react-dom.development.js?5f39724:438)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?5f39724:452)
    at executeDispatch (react-dom.development.js?5f39724:836)

这是我的组成部分：

/* eslint-disable react/no-multi-comp */
import React, {Component} from 'react';
import sv from '../../config/styleVariables'

import Editor from 'draft-js-plugins-editor';
import {EditorState,convertToRaw} from 'draft-js'
import createToolbarPlugin from 'draft-js-static-toolbar-plugin';
import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
  HeadlineOneButton,
  HeadlineTwoButton,
  HeadlineThreeButton,
  UnorderedListButton,
  OrderedListButton,
  BlockquoteButton,
} from 'draft-js-buttons'




export default class TextArea extends Component {


  constructor(props){
    super(props)

    this.state = {
      editorState: EditorState.createEmpty(),
    }

    const toolbarPlugin = createToolbarPlugin({
      structure: [
        BoldButton,
        ItalicButton,
        UnderlineButton,
        HeadlineOneButton, ,
        HeadlineTwoButton,
        HeadlineThreeButton,
        UnorderedListButton,
        OrderedListButton,
        // BlockquoteButton,
      ]
    })

    const { Toolbar } = toolbarPlugin;
    this.Toolbar = Toolbar
    this.plugins = [toolbarPlugin];

  }

  onChange(editorState){
    this.setState({
      editorState,
    })
    this.props.update(JSON.stringify(convertToRaw(editorState.getCurrentContent())))
  }

  focus(){
    this.editor.focus();
  }

  render() {
    const {Toolbar, plugins} = this
    const {name} = this.props
    return (
      <div className="TextArea">
        {/*language=SCSS*/}
        <style jsx global>{`
          .TextArea .headlineButtonWrapper {
            display: inline-block;
          }
          .TextArea {
            background: ${sv.white};
          }
          .TextArea > div>div:first-child {
            display: flex;
            padding: 0 0 .25em 0;
            border-bottom: 1px solid ${sv.border};
          }
          .TextArea > div>div:first-child>div button{
            background: transparent;
            cursor: pointer;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3em;
            height: 2.5em;
            font-size: .8em;
            margin-right: .2em;
          }
          .TextArea > div>div:first-child>div button:hover {
            background: ${sv.extraLight};
            color: ${sv.primary};
          }
          .TextArea .DraftEditor-root {
            padding: 0 .5em;
            cursor: text;
          }

          .TextArea .headlineButton {
            background: #fbfbfb;
            color: #888;
            font-size: 18px;
            border: 0;
            padding-top: 5px;
            vertical-align: bottom;
            height: 34px;
            width: 36px;
          }

          .TextArea .headlineButton:hover,
          .TextArea .headlineButton:focus {
            background: #f3f3f3;
          }
        `}
        </style>
        <div onClick={this.focus.bind(this)}>
          <Toolbar key={name} />
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange.bind(this)}
            plugins={plugins}
            ref={(element) => {
              this.editor = element
            }}
          />
        </div>
      </div>
    );
  }
}

我的组件如下所示：

Answer 1

我遇到同样的问题。看起来是因为每当块类型为editorState.getBlockTree(anchorBlockKey).getIn(...)时，在getUpdatedSelectionState.js中调用editorState.getBlockTree(anchorBlockKey)中的undefined就是unstyled。

我不知道如何解决它，因此请围绕以下解决方案进行解决：

const headerOne = '<h1>Title</h1>';
const blocksFromHTML = convertFromHTML(headerOne);
const state = ContentState.createFromBlockArray(
    blocksFromHTML.contentBlocks,
    blocksFromHTML.entityMap
);
this.state = {
    editorState: EditorState.createWithContent(state)
}

但是当您按Enter键时，还会有另一个问题，新行也将是H1。