React组件状态同步问题：点击编辑器外部回调时queryText状态滞后的解决方案咨询

这个问题我太熟悉了！你遇到的是React闭包和useState异步更新带来的典型问题——handleClickOutside函数里拿到的queryText是它被创建时捕获的旧状态值，而不是最新的编辑器内容。

问题根源 #

React的useState更新是异步批量处理的，而且组件每次重渲染都会生成新的函数实例。你的handleClickOutside是在某个时机（比如进入编辑器时）绑定的，它捕获的是当时的queryText闭包值，后续输入新内容时，虽然setQueryText触发了状态更新，但handleClickOutside里的queryText并不会自动更新，所以点击外部时传递的总是上一次的旧值。

解决方案：用useRef保存实时文本 #

useRef的current属性是可变的，并且不会触发组件重渲染，我们可以用它来同步保存编辑器的最新内容，这样就能在点击外部时直接获取到实时值。

修改后的完整代码如下：

import React, { useEffect, useState, useRef } from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-mysql";
import "ace-builds/src-noconflict/theme-eclipse";
import "./SQLEditor.css"

function SQLEditor({ queryTab, active, callback }) {
  const [queryText, setQueryText] = useState(queryTab[active].content);
  // 用ref保存实时文本内容
  const queryTextRef = useRef(queryTab[active].content);
  // 补充你代码中缺失的inEditor状态（假设用于控制编辑器显示/隐藏）
  const [inEditor, setInEditor] = useState(true);

  // 当active切换时，同步更新状态和ref
  useEffect(() => {
    const initialContent = queryTab[active].content;
    setQueryText(initialContent);
    queryTextRef.current = initialContent;
  }, [active, queryTab]);

  function handleClickOutside() {
    document.removeEventListener("mousedown", handleClickOutside);
    // 直接从ref获取最新文本
    const currentContent = queryTextRef.current;
    console.log("CALLBACK:" + currentContent);
    callback(active, { content: currentContent });
    setInEditor(false);
  }

  // 调试用的useEffect，确认状态更新
  useEffect(() => {
    console.log("Updated queryText:", queryText);
  }, [queryText]);

  return (
    <div> {/* 补全你代码中缺失的外层div */}
      <AceEditor
        mode="mysql"
        theme="eclipse"
        name="blah2"
        onChange={(newValue) => {
          setQueryText(newValue);
          // 同步更新ref的current值
          queryTextRef.current = newValue;
          console.log("Editor input:", newValue);
        }}
        fontSize={16}
        value={queryText} // 绑定value属性，确保编辑器与状态完全同步
      />
    </div>
  );
}

export default SQLEditor;

关键修改点说明 #

1. 添加useRef并同步更新：在编辑器onChange事件中，除了更新queryText状态，同时把新值赋值给queryTextRef.current，保证ref始终保存最新内容。
2. 处理active切换的情况：添加useEffect监听active和queryTab的变化，确保切换标签时，状态和ref都能同步更新为对应标签的内容。
3. 在handleClickOutside中使用ref值：不再依赖闭包中的queryText，而是直接取queryTextRef.current，这样拿到的就是实时的编辑器内容。
4. 补充编辑器的value属性：确保AceEditor的显示内容和queryText状态完全同步，避免潜在的不一致问题。

这样修改后，点击编辑器外部时，回调函数就能准确传递最新的文本内容了！

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