html - 如何根据数组中的注释数量动态创建 Quill 编辑器？

Question

import React, { useEffect} from 'react'
import "./Notes.css"
import * as Quill from 'quill'


function Notes() {
    const numberOfNotes = localStorage.length


    function getNotes() {
        var notes = []
        for (var i = 0; i < localStorage.length; i++){
            notes.push(localStorage.getItem(localStorage.key(i)));
        }
        notes.map(note => {
            const editor = document.createElement("div")
            const q = new Quill(editor, {theme: "snow"})
            q.setContents(note, "user")
            return q
        })
    }
        
    return (
        <div className="notes">
            <div className="notes_header">
                <p>You have {numberOfNotes} notes</p>
            </div>

            <div>
               {getNotes()}
            </div>
        </div>
    )
}

export default Notes

我试图让用户将笔记保存在本地存储中，然后检索并为本地存储中的每个笔记填充一个羽毛笔编辑器。

当我运行此代码时，我收到以下错误，我无法理解。

TypeError: Cannot read property 'insertBefore' of null