EditorJS总是呈现两个编辑器

Question

我正在尝试使用EditorJS的编辑器。一切正常，除了当我第一次加载页面时，它在开始时初始化两个编辑器，并且每次重新加载页面时都会追加新的编辑器。但它们都在<div id='editorjs' />的内部。我遗漏了什么吗？

// react etc. imports
import EditorJS from '@editorjs/editorjs'

const EditorComponent = (props) => {
    const [input, setInput] = useState({})
    const currentuser = useSelector((state) => state.currentuser)

    const editor = new EditorJS({
        holderId: 'editorjs',
        autofocus: true,
    })

    const postNews = () => {
        // POSTING SUTFF
    }

    return (
        <Grid>
            <Grid templateRows='auto min-content' gap={6}>
                <div id='editorjs' />
                <Button onClick={postNews}>Post news</Button>
            </Grid>
        </Grid>
    )
}

​

​

下面是来自dom的屏幕截图，在加载页面后立即添加两个编辑器。

Answer 1

关键是使用由editorjs提供的editor.isReady。如果是真的，那么EditorJS已经在运行了。

import React, { useEffect } from "react";
import EditorJS from "@editorjs/editorjs";

const Editor = () => {
  let editor = { isReady: false };
  useEffect(() => {
    if (!editor.isReady) {
      editor = new EditorJS({
        holder: "editorjs",
      });
    }
  }, []);
  return (
    <main>
      <div id="editorjs"></div>
    </main>
  );
};

export default Editor;

Answer 2

我取消了反应严格的模式，它帮助了我。

Answer 3

找到了一个简单的解决方案

const <Your Component Name> = () => {
const [editor, setEditor] = useState("");

useEffect(() => {
  setEditor(() => new EditorJS(PostEditorConfig()));
  }, []);


// .... other components
return (
<div id=editorjs></div>
)}