react-quilljs 状态改变时不重新渲染

Question

这是我使用react-quilljs的quill配置

function QuillEditor({ value, setValue }) {
  const { quill, quillRef, Quill } = useQuill({
    modules: { blotFormatter: {} },
  });

  if (Quill && !quill) {
    Quill.register('modules/blotFormatter', BlotFormatter);
  }

  useEffect(() => {
    if (quill) {
      if (value) {
        quill.clipboard.dangerouslyPasteHTML(value);
      }

      quill.on('text-change', (delta, oldContents, source) => {
        setValue(quillRef.current.firstChild.innerHTML);
      });
    }
  }, [quill, Quill]);

  return <div ref={quillRef} />;
}

我使用这个组件

                <QuillEditor
                  value={lessonData?.content}
                  setValue={(value) =>
                    setCourse((prev) => {
                      return {
                        ...prev,
                        lessonData: {
                          ...prev.lessonData,
                          content: value,
                        },
                      };
                    })
                  }
                />

当状态改变时，编辑器中的文本不会改变。我该怎么办？

我希望这段代码按照我的逻辑工作

Answer 1

你为什么不使用这个包 https://www.npmjs.com/package/react-quill