使用react-draft-wysiwyg时出现editorState.getCurrentContent不是函数错误如何解决

• 属性配置错误：你给Editor组件传递的是defaultEditorState，这是非受控组件的初始化属性，不会和你声明的editorState状态做双向绑定。编辑器内容变更后onChange返回的值不是标准的draft.js EditorState实例，导致实例上不存在getCurrentContent方法。
• 状态更新异步问题：React的setState是异步执行的，你在handleEditorChange里调用setEditorState后立刻读取editorState，拿到的还是更新前的旧值，即使属性配置正确也可能出现取值异常。

1. 将Editor组件的defaultEditorState属性替换为editorState，切换为受控组件模式，保证状态和编辑器内容双向绑定。
2. 修改内容转换逻辑，要么把onChange拿到的最新state直接传入转换函数，要么通过useEffect监听editorState变化后再执行转换，规避异步更新问题。

import React, { useState, useEffect } from 'react';

import { Editor } from "react-draft-wysiwyg";
import { EditorState } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import { convertToHTML } from 'draft-convert';
import DOMPurify from 'dompurify';


const NoteEditor = () => {
    const [editorState, setEditorState] = useState(
        () => EditorState.createEmpty(),
    );
    const [convertedContent, setConvertedContent] = useState("");

    // 监听editorState变化，自动转HTML
    useEffect(() => {
        convertContentToHTML();
    }, [editorState])

    const handleEditorChange = (state) => {
        setEditorState(state);
    }
    const convertContentToHTML = () => {
        let currentContentAsHTML = convertToHTML(editorState.getCurrentContent());
        setConvertedContent(currentContentAsHTML);
    }
    const createMarkup = (html) => {
        return  {
          __html: DOMPurify.sanitize(html)
        }
      }
      
    return(
        <div className="note-editor">
            <Editor 
                editorState={editorState} // 替换了原有的defaultEditorState属性
                onChange={handleEditorChange}
                wrapperClassName="wrapper-class"
                editorClassName="editor-class"
                toolbarClassName="toolbar-class"
            />
            <div className="preview" dangerouslySetInnerHTML={createMarkup(convertedContent)}></div>
        </div>
    )
};

export default NoteEditor;

你也可以选择不用useEffect，直接在handleEditorChange里把最新的state传给转换函数，写法如下：

const handleEditorChange = (state) => {
    setEditorState(state);
    convertContentToHTML(state); // 传入最新获取到的state
}
const convertContentToHTML = (currentState) => {
    let currentContentAsHTML = convertToHTML(currentState.getCurrentContent());
    setConvertedContent(currentContentAsHTML);
}

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