当我使用react-wysiwyg 单击文本区域时，为什么会出现空白页面？

Question

在获取内部的 API 响应后MenuItemDetail，我将其设置为responses状态，然后将其传递给 Tabs，然后传递给 TabContent。在这里，我想正确读取其 resp 和 name 属性，然后显示它们在两个相应编辑器中包含的任何内容，即 respEditor和nameEditor（resp以及name来自 API 的 json 中的字段）。

我可以从 API 中检索我的resp和name，但是当我尝试单击文本区域以添加或修改内容时，我得到了一个空白页面，并在控制台中收到此错误：

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

解决方案代码sanbox： https://codesandbox.io/s/react-wysiwyg-draft-js-ecmpth ?file=/src/TabContent.js

\n

已编辑

\n

您可以使用convertFromHTMLfromdraft-convert将 HTML 字符串解析为EditorContent. Install draft-convert，这是官方示例中推荐的方式。（参考：/sf/answers/2583344711/）

\n

npm install draft-convert\n

\n

import { convertFromHTML } from \xe2\x80\x98draft-convert\xe2\x80\x99;\n\nconst [respState, setRespState] = useState(EditorState.createWithContent(convertFromHTML(resp)));\nconst [nameState, setNameState] = useState(EditorState.createWithContent(convertFromHTML(name)));\n

\n