如何在 DraftJS 中渲染带有标题的 Img

如何解决如何在 DraftJS 中渲染带有标题的 Img

正如标题所说，我正在尝试使用 DraftJS 实现 img 渲染。
这就是我正在尝试这样做的方式：

export const blockRenderer = block => {
    if (block.getType() === "atomic") {
        return {
            component: ImageBlock,editable: true
        };
    }

    return null;
}

const ImageBlock = (props) => {

    const entity = props.contentState.getEntity(props.block.getEntityAt(0));
    const {src} = entity.getData();

    if (!!src) {
        return (
                <figure>
                    <img
                        src={src}
                        alt=""
                    />
                    <figcaption>
                    <EditorBlock{...props}/>
                    </figcaption>

                </figure>
        );
    }
    return null
}

该方法几乎有效，我可以编辑 img 的文本内容，但是，当我尝试删除图像时，出现以下错误：

invariant.js:40 Uncaught Invariant Violation: UnkNown DraftEntity key: null.
    at invariant (http://www.keepingtime.com:3000/static/js/0.chunk.js:32219:15)
    at Object.__get (http://www.keepingtime.com:3000/static/js/0.chunk.js:18929:27)
    at ContentState.getEntity (http://www.keepingtime.com:3000/static/js/0.chunk.js:14967:24)
    at ImageBlock (http://www.keepingtime.com:3000/static/js/main.chunk.js:1895:37)
    at renderWithHooks (http://www.keepingtime.com:3000/static/js/0.chunk.js:57479:22)
    at updateFunctionComponent (http://www.keepingtime.com:3000/static/js/0.chunk.js:59658:24)
    at beginWork (http://www.keepingtime.com:3000/static/js/0.chunk.js:61183:20)
    at HTMLUnkNownElement.callCallback (http://www.keepingtime.com:3000/static/js/0.chunk.js:42872:18)
    at Object.invokeGuardedCallbackDev (http://www.keepingtime.com:3000/static/js/0.chunk.js:42921:20)
    at invokeGuardedCallback (http://www.keepingtime.com:3000/static/js/0.chunk.js:42974:35)
    at beginWork$1 (http://www.keepingtime.com:3000/static/js/0.chunk.js:65735:11)
    at performunitOfWork (http://www.keepingtime.com:3000/static/js/0.chunk.js:64699:16)
    at workLoopSync (http://www.keepingtime.com:3000/static/js/0.chunk.js:64675:26)
    at performSyncWorkOnRoot (http://www.keepingtime.com:3000/static/js/0.chunk.js:64293:13)
    at http://www.keepingtime.com:3000/static/js/0.chunk.js:53813:28
    at unstable_runWithPriority (http://www.keepingtime.com:3000/static/js/0.chunk.js:106689:16)
    at runWithPriority$1 (http://www.keepingtime.com:3000/static/js/0.chunk.js:53759:14)
    at flushSyncCallbackQueueImpl (http://www.keepingtime.com:3000/static/js/0.chunk.js:53808:11)
    at flushSyncCallbackQueue (http://www.keepingtime.com:3000/static/js/0.chunk.js:53796:7)
    at discreteUpdates$1 (http://www.keepingtime.com:3000/static/js/0.chunk.js:64432:11)
    at discreteUpdates (http://www.keepingtime.com:3000/static/js/0.chunk.js:43494:16)
    at dispatchdiscreteEvent (http://www.keepingtime.com:3000/static/js/0.chunk.js:46893:7)
invariant @ invariant.js:40
__get @ DraftEntity.js:182
getEntity @ ContentState.js:173
ImageBlock @ ImageBlock.js:7
renderWithHooks @ react-dom.development.js:14803
updateFunctionComponent @ react-dom.development.js:17034
beginWork @ react-dom.development.js:18610
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performunitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchdiscreteEvent @ react-dom.development.js:4168
index.js:1 The above error occurred in the <ImageBlock> component:
    in ImageBlock (created by DraftEditorContents)
    in figure (created by DraftEditorContents)
    in div (created by DraftEditorContents)
    in DraftEditorContents (created by DraftEditor)
    in div (created by DraftEditor)
    in div (created by DraftEditor)
    in div (created by DraftEditor)
    in DraftEditor (at Editor.js:23)
    in div (at Editor.js:18)
    in MainEditor (at WikiPage.js:101)
    in div (at WikiPage.js:99)
    in div (at WikiPage.js:96)
    in div (at WikiPage.js:94)
    in WikiPage (created by Context.Consumer)
    in Route (at App.js:49)
    in Switch (at App.js:42)
    in App (at src/index.js:13)
    in GlobalState (at src/index.js:12)
    in Router (created by browserRouter)
    in browserRouter (at src/index.js:11)

Consider adding an error boundary to your tree to customize error handling behavior.
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2430
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
update.callback @ react-dom.development.js:20708
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19883
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchdiscreteEvent @ react-dom.development.js:4168
invariant.js:40 Uncaught Invariant Violation: UnkNown DraftEntity key: null.
    at invariant (http://www.keepingtime.com:3000/static/js/0.chunk.js:32219:15)
    at Object.__get (http://www.keepingtime.com:3000/static/js/0.chunk.js:18929:27)
    at ContentState.getEntity (http://www.keepingtime.com:3000/static/js/0.chunk.js:14967:24)
    at ImageBlock (http://www.keepingtime.com:3000/static/js/main.chunk.js:1895:37)
    at renderWithHooks (http://www.keepingtime.com:3000/static/js/0.chunk.js:57479:22)
    at updateFunctionComponent (http://www.keepingtime.com:3000/static/js/0.chunk.js:59658:24)
    at beginWork (http://www.keepingtime.com:3000/static/js/0.chunk.js:61183:20)
    at HTMLUnkNownElement.callCallback (http://www.keepingtime.com:3000/static/js/0.chunk.js:42872:18)
    at Object.invokeGuardedCallbackDev (http://www.keepingtime.com:3000/static/js/0.chunk.js:42921:20)
    at invokeGuardedCallback (http://www.keepingtime.com:3000/static/js/0.chunk.js:42974:35)
    at beginWork$1 (http://www.keepingtime.com:3000/static/js/0.chunk.js:65735:11)
    at performunitOfWork (http://www.keepingtime.com:3000/static/js/0.chunk.js:64699:16)
    at workLoopSync (http://www.keepingtime.com:3000/static/js/0.chunk.js:64675:26)
    at performSyncWorkOnRoot (http://www.keepingtime.com:3000/static/js/0.chunk.js:64293:13)
    at http://www.keepingtime.com:3000/static/js/0.chunk.js:53813:28
    at unstable_runWithPriority (http://www.keepingtime.com:3000/static/js/0.chunk.js:106689:16)
    at runWithPriority$1 (http://www.keepingtime.com:3000/static/js/0.chunk.js:53759:14)
    at flushSyncCallbackQueueImpl (http://www.keepingtime.com:3000/static/js/0.chunk.js:53808:11)
    at flushSyncCallbackQueue (http://www.keepingtime.com:3000/static/js/0.chunk.js:53796:7)
    at discreteUpdates$1 (http://www.keepingtime.com:3000/static/js/0.chunk.js:64432:11)
    at discreteUpdates (http://www.keepingtime.com:3000/static/js/0.chunk.js:43494:16)
    at dispatchdiscreteEvent (http://www.keepingtime.com:3000/static/js/0.chunk.js:46893:7)

对找出问题的任何帮助将不胜感激。
另外，这是最好的方法吗？我有一个想法，就是用一个特殊的 CaptionsEditor 来代替 EditorBlock，以允许更多定制的功能集。然后，编辑器会将其数据保存到实体中的数据元素中。这是否太复杂，还是一个可行的选择？