请求将react-draft-wysiwyg类组件代码转为函数式组件

以下是转换后的完整函数式组件代码：

import React, { useState } from "react";
import { EditorState } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const NewEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const [uploadedImages, setUploadedImages] = useState([]);

  const onEditorStateChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

  const uploadImageCallBack = (file) => {
    const imageObject = {
      file: file,
      localSrc: URL.createObjectURL(file),
    };
    // 函数式更新确保获取最新状态
    setUploadedImages(prevImages => [...prevImages, imageObject]);
    
    return new Promise((resolve) => {
      resolve({ data: { link: imageObject.localSrc } });
    });
  };

  return (
    <Editor
      editorState={editorState}
      onEditorStateChange={onEditorStateChange}
      toolbar={{
        image: {
          uploadCallback: uploadImageCallBack,
          previewImage: true,
        },
      }}
    />
  );
};

export default NewEditor;

转换关键点说明 #

• 状态替换：用useState钩子替代类组件的this.state，拆分维护editorState和uploadedImages两个状态，逻辑更直观
• 取消this绑定：函数式组件内部函数无需手动绑定this，直接调用状态更新方法即可
• 规范状态更新：更新图片数组时采用函数式写法，通过prevImages获取最新状态，避免直接修改原数组引发的状态异常
• 保留核心逻辑：完整保留原有的图片本地预览上传逻辑，返回Promise满足编辑器组件的回调要求

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