如何让TipTap Editor识别更新后的外部React状态值

核心问题分析 #

你遇到的本质是React状态更新与TipTap编辑器实例生命周期不同步：

• 初始创建编辑器时，selectionUpdate回调捕获的是当时的chapterComments状态闭包，后续状态更新后，旧的编辑器实例依然引用旧的状态值。
• 直接把chapterComments加入useEffect依赖，会导致每次状态变化都重新创建编辑器，引发多次selectionUpdate执行，且只有最后一次是最新状态。

解决方案：用Ref同步状态 + 按需更新编辑器回调 #

步骤1：用Ref保存最新的评论状态 #

React状态更新后，Ref可以实时获取最新值，不会被闭包捕获：

import { useRef, useEffect, useState } from 'react';

// ... 其他业务代码
const [chapterComments, setChapterComments] = useState([]);
const commentsRef = useRef(chapterComments);

// 同步状态到Ref，确保Ref始终持有最新评论数据
useEffect(() => {
  commentsRef.current = chapterComments;
}, [chapterComments]);

步骤2：修改编辑器的selectionUpdate回调，使用Ref中的值 #

创建编辑器实例时，让selectionUpdate读取Ref的最新值，避免依赖闭包中的旧状态：

useEffect(() => {
  const editor = new Editor({
    // ... 编辑器基础配置
    onSelectionUpdate: ({ editor }) => {
      const commentNode = editor.view.dom.querySelector('[data-comment]');
      if (commentNode) {
        const commentId = commentNode.getAttribute('data-comment');
        // 从Ref中获取最新的评论数组，匹配目标评论
        const targetComment = commentsRef.current.find(c => c.id === commentId);
        // 后续处理逻辑直接使用targetComment即可
      }
    },
  });

  // 清理函数：组件卸载时销毁编辑器实例
  return () => {
    editor.destroy();
  };
}, []); // 依赖数组为空，仅初始化一次编辑器

步骤3：评论添加后手动触发选区更新（可选） #

如果需要在添加评论后立即让编辑器感知最新状态，无需重新创建实例，可以手动触发一次选区更新：

// 在完成评论创建、更新chapterComments后调用
editor.commands.setTextSelection(editor.state.selection);

方案优势 #

• Ref的current属性不受React闭包限制，selectionUpdate每次执行都能拿到最新的评论数据。
• 编辑器实例仅初始化一次，避免了重复创建导致的selectionUpdate多次执行问题。

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