EditorJS 总是呈现两个编辑器

Question

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

// 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

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

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

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


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