React组件中useEffect外变量elements数据滞后问题及修复

代码功能 #

这是一个React组件，可根据input框输入内容，对DOM中的元素按文本进行搜索匹配。

import { useEffect, useReducer } from "react";
let elements: any[] = [];

const App = () => {
  const initialState = { keyEvent: {}, value: "Initial state" };
  const [state, updateState] = useReducer(
    (state: any, updates: any) => ({ ...state, ...updates }),
    initialState
  );

  function handleInputChange(event: any) {
    updateState({ value: event.target.value });
  }

  function isCommand(event: KeyboardEvent) {
    return event.ctrlKey;
  }

  function handleDocumentKeyDown(event: any) {
    if (isCommand(event)) {
      updateState({ keyEvent: event });
    }
  }

  useEffect(() => {
    document.addEventListener("keydown", handleDocumentKeyDown);

    return () => {
      document.removeEventListener("keydown", handleDocumentKeyDown);
    };
  }, []);

  useEffect(() => {
    const selectors = "button";

    const pattern = new RegExp(state.value === "" ? "^$" : state.value);

    elements = Array.from(document.querySelectorAll(selectors)).filter(
      (element) => {
        if (element.childNodes) {
          const nodeWithText = Array.from(element.childNodes).find(
            (childNode) => childNode.nodeType === Node.TEXT_NODE
          );

          if (nodeWithText) {
            // 注释此条件语句则问题消失
            if (nodeWithText.textContent?.match(pattern)) {
              return element;
            }
          }
        }
      }
    );

    console.log('elements 1:', elements)
  }, [state]);

  console.log('elemets 2:', elements)

  return (
    <div>
      <input
        id="input"
        type="text"
        onChange={handleInputChange}
        value={state.value}
      />
      <div id="count">{elements.length}</div>
      <button>a</button>
      <button>b</button>
      <button>c</button>
    </div>
  );
};

export default App;

问题现象 #

useEffect钩子外部的elements变量始终持有旧数据。例如，在input中输入“a”时，useEffect内的console.log('elements 1:', elements)输出1，但组件顶层的console.log('elemets 2:', elements)输出0（页面共有3个button，其中一个文本为“a”）。

特殊情况 #

若注释掉以下条件判断语句，输入任意内容时，两处console.log都会输出3（即所有button元素），此时问题不会出现：

// 注释此条件语句则问题消失
if (nodeWithText.textContent?.match(pattern)) {
  return element;
}

问题成因 #

1. 渲染时序差异：组件顶层代码（包括console.log和JSX渲染）在每次组件渲染的初始阶段执行，而useEffect是在组件渲染完成、DOM更新后才触发。当state.value变化引发重渲染时，顶层代码先执行，此时elements还没被useEffect更新，输出的是上一次渲染的旧值；useEffect内的代码后执行，能拿到最新的匹配结果。
2. 特殊情况的本质：注释匹配条件后，filter返回所有button元素，elements的长度固定为3。第一次渲染时elements就被赋值为3个元素，后续重渲染时useEffect的赋值操作不会改变长度，所以顶层和useEffect的输出看似一致，但渲染时序问题并未解决。
3. 全局变量的缺陷：使用组件外部的全局变量存储状态，违背React状态管理原则。全局变量的更新不会触发组件重渲染，还会因为渲染时序导致数据与视图不同步。

修复方案 #

将elements改为组件内部状态，通过React的状态管理机制保证数据与渲染同步：

修复后代码 #

import { useEffect, useReducer, useState } from "react";

const App = () => {
  const initialState = { keyEvent: {}, value: "Initial state" };
  const [state, updateState] = useReducer(
    (state: any, updates: any) => ({ ...state, ...updates }),
    initialState
  );
  // 用useState管理匹配到的元素
  const [elements, setElements] = useState<any[]>([]);

  function handleInputChange(event: any) {
    updateState({ value: event.target.value });
  }

  function isCommand(event: KeyboardEvent) {
    return event.ctrlKey;
  }

  function handleDocumentKeyDown(event: any) {
    if (isCommand(event)) {
      updateState({ keyEvent: event });
    }
  }

  useEffect(() => {
    document.addEventListener("keydown", handleDocumentKeyDown);
    return () => {
      document.removeEventListener("keydown", handleDocumentKeyDown);
    };
  }, []);

  useEffect(() => {
    const selectors = "button";
    const pattern = new RegExp(state.value === "" ? "^$" : state.value);

    const matchedElements = Array.from(document.querySelectorAll(selectors)).filter(
      (element) => {
        if (!element.childNodes) return false;
        const nodeWithText = Array.from(element.childNodes).find(
          (childNode) => childNode.nodeType === Node.TEXT_NODE
        );
        return nodeWithText?.textContent?.match(pattern);
      }
    );

    setElements(matchedElements);
    console.log('elements 1:', matchedElements);
  }, [state]);

  console.log('elements 2:', elements);

  return (
    <div>
      <input
        id="input"
        type="text"
        onChange={handleInputChange}
        value={state.value}
      />
      <div id="count">{elements.length}</div>
      <button>a</button>
      <button>b</button>
      <button>c</button>
    </div>
  );
};

export default App;

修复核心要点 #

• 用useState替代全局变量：将elements转为组件内部状态，通过setElements更新状态，确保状态变化能触发组件重渲染，让视图与数据保持同步。
• 优化过滤逻辑：补充return false分支，让filter逻辑更严谨，避免隐式返回undefined导致的异常。
• 数据流向清晰：useEffect中计算出匹配结果后，直接更新状态，不再依赖全局变量，消除时序问题带来的数据不同步。

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