DraftJs：不变违规：使用 convertToRaw 时块不是 BlockNode

Posted 2023-03-07

【中文标题】DraftJs：不变违规：使用 convertToRaw 时块不是 BlockNode

【英文标题】：DraftJs: Invariant Violation: block is not a BlockNode when using convertToRaw

【发布时间】：2021-01-25 02:15:29

【问题描述】：

在草稿 js 中使用 convertToRaw 时，我收到了 Invariant Violation: block is not a BlockNode。

不幸的是，它在代码沙箱中运行良好，但在本地运行不正常，这让我很难调试问题： https://codesandbox.io/s/vibrant-ramanujan-c6h4u?file=/src/App.js:0-1194

在我的本地引发错误的行是：

const v2 = convertToRaw(v1);

完整代码如下：

import  useState, useRef  from "react";
import  Editor, createEditorState  from "medium-draft";
import Button from "@material-ui/core/Button";
import  convertToRaw  from "draft-js";

export default function PostEditor() 
  const [editorState, setEditorState] = useState(createEditorState());

  //update medium editor
  const changeEditor = (editorState) => 
    setEditorState(editorState);
  ;
  const editorRef = useRef();
  const handleSubmit = async (event) => 
    console.log(editorState.getCurrentContent());
    const v1 = editorRef.current.props.editorState.getCurrentContent();
    const v2 = convertToRaw(v1);
    console.log(v2);
  ;
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Editor
        ref=editorRef
        editorState=editorState
        onChange=changeEditor
      />

      <Button
        variant="contained"
        color="primary"
        size="large"
        onClick=(event) => 
          handleSubmit(event);
        
      >
        Submit
      </Button>
    </div>
  );

【问题讨论】：

我也遇到过这个错误。现在不记得问题出在哪里了，但是请查看您是否运行了错误的版本github.com/jpuri/react-draft-wysiwyg/issues/599

@dwjohnston 我已经访问了该问题 5 次，并使用了不同版本的草稿 js。我什至将 draft-js 降级到 0.10.0 但不管是什么相同的错误。如果你能回忆起那是什么，那就太好了。感谢您的参与。

【参考方案1】：

您是否降级到 Draft-js v0.10.4，它似乎解决了我的问题。 见https://github.com/HubSpot/draft-convert/issues/143

【参考方案2】：

如果您有 2 个 package.json 文件，请尝试从子文件中删除 Draft-js。