创建新块 + 复制时不可变/Draftjs 错误 'block.getKey is not a function'

Question

当我从 Immutable OrderedMap 到 Array 创建一个新的 contentState 时，我从 Draftjs 得到了 block.getKey is not a function，即使提供了密钥...

我在 draftjs github 上发现了一个帖子，暗示这可能是一个错误，但它是 2016 年的，想知道是否有人有他们可以建议的解决方案或解决方法...

这里是link对codesandbox的复制 https://codesandbox.io/s/blockgetkey-error-reproduction-h75mf?file=/src/index.js

import React from "react";
import ReactDOM from "react-dom";
import {
  List as ImmutableList,
  Repeat as ImmutableRepeat,
  Map as ImmutableMap,
  OrderedMap
} from "immutable";
import {
  Editor,
  EditorState,
  ContentBlock,
  ContentState,
  genKey,
  CharacterMetadata
} from "draft-js";
function MyEditor() {
  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );
  const editor = React.useRef(null);
  function focusEditor() {
    editor.current.focus();
  }
  React.useEffect(() => {
    focusEditor();
  }, []);
  return (
    <div onClick={focusEditor}>
      <Editor
        ref={editor}
        editorState={editorState}
        onChange={(editorState) => setEditorState(editorState)}
      />
      <button
        onClick={() => {
          // const newBlockMap = contentState.getBlockMap().set(newBlock.key, newBlock)
          const charData = CharacterMetadata.create();
          const text1 = "This was the test value";
          const contentState = editorState.getCurrentContent();
          const blockMap = contentState.getBlockMap();
          const newBlock = new ContentBlock({
            key: genKey(),
            type: "Img",
            text: text1,
            characterList: ImmutableList(
              ImmutableRepeat(charData, text1.length)
            ),
            data: ImmutableMap({ content: "foo bear" })
          });

          const insertBefore = OrderedMap().withMutations((r) => {
            blockMap.forEach((k, v) => {
              console.log("k  ", k);
              console.log("v  ", v);
              if (3 === k) {
                r.set(newBlock.key, newBlock);
              }
              r.set(k, v);
            });
          });

          let newcontentState = ContentState.createFromBlockArray(
            insertBefore.toArray()
          ).set("selectionAfter", contentState.getSelectionAfter());

          const newEditorState = EditorState.push(
            editorState,
            newcontentState,
            "insert-fragment"
          );

          setEditorState({
            ...editorState,
            editorState: newEditorState
          });
        }}
      >
        Add New Block
      </button>
    </div>
  );
}

function App() {
  return (
    <div>
      <h3>Test</h3>
      <MyEditor />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

我已经解决了这个问题，我会在这里留下我的工作代码，希望它能帮助别人，

我正在使用 Immutebale 突变来尝试创建一个新的 BlockMap，但它似乎没有以 draftjs 可以理解的方式构建。我没有使用循环，而是使用 blockMap.toSeq().takeUntil((v) & blockMap.toSeq().skipUntil((v) 来拆分当前时钟状态，添加新块并重新组装它。

我也将 contnetState.createFromArray() 更改为 contnetState.merge()，这样更干净！因为它让您无需转换即可合并不可变的 Map 对象。

                    e.preventDefault();
                    e.stopPropagation();

                    const getCurrentBlock = () => {
                        const selectionState = editorState.getSelection();
                        const contentState = editorState.getCurrentContent();
                        const block = contentState.getBlockForKey(selectionState.getStartKey());
                        return block;
                    };

                    let pivotBlockKey = getCurrentBlock().key
                    const contnetState = editorState.getCurrentContent();
                    const blockMap = contnetState.getBlockMap();
                    const block = blockMap.get(pivotBlockKey);
                    const blocksBefore = blockMap.toSeq().takeUntil((v) => (v === block));
                    const blocksAfter = blockMap.toSeq().skipUntil((v) => (v === block)).rest();

                    const charData = CharacterMetadata.create()
                    const text1 = "This was the test value"
                    const newBlockKey = genKey()
                    const newBlock = new ContentBlock({
                        key: newBlockKey,
                        type: "header-one",
                        text: text1,
                        characterList: ImmutableList(ImmutableRepeat(charData, text1.length)),
                        data: ImmutableMap({ content: "foo bear" })
                    })

                    const newBlockMap = blocksBefore.concat(
                        [[pivotBlockKey, block], [newBlockKey, newBlock]],
                        blocksAfter
                    ).toOrderedMap();

                    let newContnetState = contnetState.merge({
                        blockMap: newBlockMap,
                        selectionBefore: contentState.getSelectionBefore()
                    })
                    
                    const newEditorState = EditorState.push(
                        editorState, 
                        newContnetState,
                        'insert-fragment'
                    );
                    
                    setState({ 
                        ...state,
                        editorState: newEditorState,
                    });

Answer 2

当我自己安装 immutable 并将其更新到 4.0 时，这种情况开始发生

当我删除它并让 draft-js 安装版本“3.7.6”时有效

创建新块 + 复制时不可变/Draftjs 错误 'block.getKey is not a function'

Immutable / Draftjs Error 'block.getKey is not a function' when creating new block + reproduction

javascript

reactjs

immutable.js

draftjs