react-draft-wysiwyg使用createWithContent设置初始编辑器状态无内容显示问题

核心问题原因 #

• 编辑器状态结构错误：初始化editorState时额外包裹了一层对象，导致传入<Editor>的initialEditorState不是合法的Draft.js编辑器实例，组件无法识别内容，所以显示空白
• 组件语法错误：<Editor>标签结尾多写了一个多余的}，可能引发运行异常
• 若content.richTextDescription是接口异步获取的数据，组件首次渲染时数据还未返回，而initialEditorState仅在组件首次挂载时生效，后续数据返回也不会自动更新编辑器内容

修复步骤 #

1. 修正editorState的初始化结构，不要额外包裹对象：

// 初始化编辑器state 直接存储EditorState实例
const [editorState, setEditorState] = useState(
  EditorState.createWithContent(
    convertFromRaw(JSON.parse(richTextDescription))
  )
);

2. 修正Editor组件的语法错误，删除多余的闭合符号：

<Editor
  initialEditorState={editorState}
  onEditorStateChange={onEditorStateChange}
/>

3. 如果content.richTextDescription是异步加载的数据，添加useEffect监听数据变更后手动更新编辑器状态：

useEffect(() => {
  if (content.richTextDescription) {
    setEditorState(
      EditorState.createWithContent(
        convertFromRaw(JSON.parse(content.richTextDescription))
      )
    )
  }
}, [content.richTextDescription])

内容的提问来源于stack exchange，提问作者Usama