Javascript 不可变/Draftjs错误'；block.getKey不是函数'；创建新块时+；繁殖

当我从Immutable OrderedMap到Array创建新的contentState时，我从Draftjs获得

block.getKey不是一个函数，即使提供了键

我在draftjs github上发现一条线索，暗示这可能是一个bug，但这是2016年的，
想知道是否有人有他们可以建议的解决方案或解决方法

这里是一个代码沙盒复制的链接

从“React”导入React；
从“react dom”导入react dom；
进口{
列表为不可变列表，
重复作为不可变重复，
映射为不可变映射，
订购地图
}从“不变”；
进口{
编辑
编辑状态，
ContentBlock，
内容国，
根基，
字符元数据
}摘自《js草案》；
函数MyEditor（）{
常量[editorState，setEditorState]=React.useState(
EditorState.createEmpty（）
);
const editor=React.useRef（null）；
函数focusEditor（）{
editor.current.focus（）；
}
React.useffect（（）=>{
焦点编辑器（）；
}, []);
返回(
setEditorState（editorState）}
/>
{
//const newBlockMap=contentState.getBlockMap（）.set（newBlock.key，newBlock）
const charData=CharacterMetadata.create（）；
const text1=“这是测试值”；
const contentState=editorState.getCurrentContent（）；
const blockMap=contentState.getBlockMap（）；
const newBlock=新内容块({
key:genKey（），
类型：“Img”，
文本：文本1，
characterList:ImmutableList(
ImmutableRepeat（charData，text1.length）
),
数据：ImmutableMap（{content:“foo bear”}）
});
const insertBefore=OrderedMap（）。带突变（（r）=>{
区块图.forEach（（k，v）=>{
控制台日志（“k”，k）；
控制台日志（“v”，v）；
如果（3==k）{
r、 设置（newBlock.key，newBlock）；
}
r、 set（k，v）；
});
});
让newcontentState=ContentState.createFromBlockArray(
insertBefore.toArray（）
).set（“selectionAfter”，contentState.getSelectionAfter（））；
const newEditorState=EditorState.push(
编辑状态，
新州，
“插入片段”
);
setEditorState({
…编辑状态，
editorState:newEditorState
});
}}
>
添加新块
);
}
函数App（）{
返回(
试验
);
}
render（，document.getElementById（“根”））；
我已经解决了这个问题，我将把我的工作代码留在这里，希望它能帮助别人

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

我还将
contnetState.createFromArray（）
更改为
contnetState.merge（）
，这非常干净！因为它允许您在不进行转换的情况下合并不可变的映射对象

                    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,
                    });

当我自行安装immutable并将其更新为4.0时，就开始出现这种情况

当我删除它并让draft js安装版本“3.7.6”时，它起作用了

                    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,
                    });