javascript - 为什么当我使用 react-wysiwyg 单击我的 textarea 区域时会出现空白页？

Question

得到 MenuItemDetail 内部的 API 响应后，我将其设置为 responses state，然后传递给 Tabs，然后是 TabContent。在这里，我想正确读取它的 resp 和 name 属性，然后在两个相应的编辑器中显示它们包含的任何内容，即 respEditor和 nameEditor (来自 API 的我的 json 中的 resp 和 name 字段)。
我可以找回我的resp和 name来自我的 API，但是当我尝试单击 textarea 区域以添加或修改内容时，我得到了 空白页 ，并在控制台中得到这个错误:

Uncaught TypeError: contentState.getBlockMap is not a function

我在论坛上查过这个问题: DraftJS - contentState.getBlockMap is not a function
我真的真的不知道为什么

const TabContent = ({  onChange, resp, , status }) => {
  const [respEditor, setRespEditor] = useState(
    EditorState.createWithContent(convertFromHTML(resp !== null ? resp : ""))
  );

  function respChange(state) {
    setRespEditor(state);
    onChange({
      resp: convertToRaw(state.getCurrentContent()),
      status
    });
  }



  let handle = async (e) => {
    e.preventDefault();
    try {
      let res = await fetch("", {
        method: "POST",
        body: JSON.stringify({
          resp: convertToHTML(respEditor.getCurrentContent()),             
          status: status
        })
      });
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <form onSubmit={handle}>        
      <Editor
        editorState={respEditor}
        onEditorStateChange={respChange}
        wrapperclassName="wrapperclassName"
        editorclassName="editorclassName"
        toolbar={{
          options: ["inline"],
          inline: { inDropdown: false }
        }}
      />

      
          <input
            type="radio"
            value="B"
            onChange={(e) =>
              onChange({
                resp,
                status: e.target.value
              })
            }          
          <input
         
        </span>
      </div>

    
    </form>
  );
};

这是我来自 api 的 json menuId:1 :

[
  {
    "menuId": 1,
    "name": "Menu1", 
    "trust":1,   
    "dishes": {
      "meat": "N/A",
      "vegetables": "pea"
    },
    "list": [
      {
        "resp": "resp1",
        "question": "question1",
        "link": "",
        "name": "Name1",
        "status": "Finished"
      },
      {
        "resp": "resp2",
        "question": "question2",
        "link": "http://mylink.com",
        "name": "Name2",
        "status": "Saved"
      }
    ]
  }
]

Answer 1

解决方案代码框:https://codesandbox.io/s/react-wysiwyg-draft-js-ecmpth?file=/src/TabContent.js
已编辑
您可以使用convertFromHTML来自 draft-convert将 HTML 字符串解析为 EditorContent .安装draft-convert ，这是官方示例中推荐的方式。 (引用:https://stackoverflow.com/a/36904924/9744063)

npm install draft-convert

import { convertFromHTML } from ‘draft-convert’;

const [respState, setRespState] = useState(EditorState.createWithContent(convertFromHTML(resp)));
const [nameState, setNameState] = useState(EditorState.createWithContent(convertFromHTML(name)));