react-quilljs组件状态变更时不重新渲染的问题求助

你的问题核心是useEffect的依赖数组未包含value，导致父组件传入的lessonData.content变化时，编辑器不会触发内容更新逻辑。

修改后的完整代码如下：

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

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

  // 监听父组件传入的value变化，同步更新编辑器内容
  useEffect(() => {
    if (quill && value) {
      // 对比当前编辑器内容与传入值，避免重复更新造成循环
      const currentContent = quillRef.current.firstChild.innerHTML;
      if (currentContent !== value) {
        quill.clipboard.dangerouslyPasteHTML(value);
      }
    }
  }, [quill, value]); // 新增value到依赖数组

  // 监听编辑器自身的文本变化，同步到父组件state
  useEffect(() => {
    if (quill) {
      const handleTextChange = (delta, oldContents, source) => {
        // 仅当修改来源为用户操作时才更新父组件，避免和父组件更新逻辑冲突
        if (source === 'user') {
          setValue(quillRef.current.firstChild.innerHTML);
        }
      };

      quill.on('text-change', handleTextChange);
      // 清理监听函数，防止内存泄漏
      return () => quill.off('text-change', handleTextChange);
    }
  }, [quill, setValue]);

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

关键修改说明： #

1. 依赖数组添加value：让组件能监听到父组件传入内容的变化，触发编辑器同步更新
2. 内容对比判断：避免父组件state更新与编辑器自身修改形成循环渲染
3. 拆分逻辑为两个useEffect：将父组件同步和编辑器自身修改的逻辑分离，代码更清晰
4. 限制更新触发源：仅在用户操作修改编辑器时同步到父组件，排除程序触发的内容更新（比如父组件传值）

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