React中如何在Lexical编辑器的update内发起异步请求更新内容？

问题核心在于editor.update()的回调必须是同步执行的，它依赖编辑器的Active State上下文。一旦在回调中加入await，回调变成异步函数，等API请求返回时，原Active State已经失效，后续的选区操作自然会抛出找不到编辑器状态的错误。

正确的实现步骤 #

分三步处理：同步读取选中内容 → 异步调用API → 同步更新编辑器内容

// 1. 同步获取选中的文本内容
let selectedText = '';
editor.update(() => {
  const selection = $getSelection();
  // 确保是范围选区（文本选中状态）
  if (selection && $isRangeSelection(selection)) {
    selectedText = selection.getTextContent();
    // 可选：如果需要显示加载状态，这里可以先插入占位符
    // selection.insertText('处理中...');
    // $setSelection(null);
  }
});

// 2. 异步调用API（仅在有选中内容时执行）
if (selectedText) {
  try {
    const textApiResponse = await fetchResponse(selectedText);
    // 3. 拿到API结果后，再次调用同步的update更新编辑器
    editor.update(() => {
      const selection = $getSelection();
      if (selection && $isRangeSelection(selection)) {
        // 删除原有选中内容，插入API返回的新文本
        selection.deleteContents();
        selection.insertText(textApiResponse);
      }
      $setSelection(null);
    });
  } catch (err) {
    // 处理API请求失败的情况
    console.error('API请求失败:', err);
  }
}

关键细节说明 #

• 两次editor.update()的回调都是同步函数，确保操作始终在编辑器的Active State上下文内执行，避免状态失效问题。
• 如果需要处理用户在API请求期间修改选区的情况，可以在第一次update时记录选区的位置信息（如节点ID、偏移量），在第二次update时先恢复选区再执行替换操作，保证更新的准确性。

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