React中useEffect与state无法更新表格数据问题求助

我写了一个包含Table组件的文件，需求是当codes数组中添加带code属性（比如"848389494"）的元素后，组件要显示对应编码。现在每次调用addNewCode函数时，本该更新组件内的_codeData状态，但因为这个函数在外部作用域，没法直接更新状态。而且addNewCode必须导出给其他组件用，不能移到ScannerResultTable组件内部。我试过用useEffect监听codes数组的变化，但因为codes是外部变量，监听不生效，求解决办法。

当前代码：

const codes = []

export function addNewCode(value){
    codes.push({ code: value });
}

export default function ScannerResultTable() {
    const [_codeData, setCodeData] = useState([]);

    useEffect(() => {
        console.log("Hi im rendering");
        setCodeData(codes);
      }, []);

    const [tableData, setTableData] = useState(_codeData);
}

核心问题是普通JS数组codes的变化无法被React感知，得把它改造成可追踪的状态容器，同时让addNewCode触发组件的更新逻辑。

方法1：订阅-发布模式改造状态容器 #

给codes加上订阅机制，让组件能监听数组的更新：

// 存储组件的更新回调
const subscribers = new Set();
let codes = [];

export function addNewCode(value) {
  // 用新数组替换原数组，保证引用变化
  codes = [...codes, { code: value }];
  // 通知所有订阅的组件更新状态
  subscribers.forEach(callback => callback([...codes]));
}

// 供组件订阅数据变化的函数
export function subscribeToCodes(callback) {
  subscribers.add(callback);
  // 初始同步一次现有数据
  callback([...codes]);
  // 返回取消订阅的函数，防止组件卸载后内存泄漏
  return () => subscribers.delete(callback);
}

export default function ScannerResultTable() {
  const [codeData, setCodeData] = useState([]);

  useEffect(() => {
    // 订阅codes变化，更新组件状态
    const unsubscribe = subscribeToCodes(setCodeData);
    // 组件卸载时取消订阅
    return unsubscribe;
  }, []);

  // 直接用codeData作为表格数据源，不需要额外的tableData状态
  return (
    <table>
      {codeData.map((item, index) => (
        <tr key={index}>
          <td>{item.code}</td>
        </tr>
      ))}
    </table>
  );
}

方法2：React Context统一管理（适合多组件共享数据） #

如果有多个组件需要用到codes数据或调用addNewCode，用Context来统一管理更方便：

import { createContext, useContext, useState } from 'react';

const CodeContext = createContext({
  codes: [],
  addNewCode: () => {}
});

export function CodeProvider({ children }) {
  const [codes, setCodes] = useState([]);

  const addNewCode = (value) => {
    setCodes(prev => [...prev, { code: value }]);
  };

  return (
    <CodeContext.Provider value={{ codes, addNewCode }}>
      {children}
    </CodeContext.Provider>
  );
}

// 导出供其他组件调用addNewCode的Hook
export function useAddNewCode() {
  const { addNewCode } = useContext(CodeContext);
  return addNewCode;
}

export default function ScannerResultTable() {
  const { codes } = useContext(CodeContext);

  return (
    <table>
      {codes.map((item, index) => (
        <tr key={index}>
          <td>{item.code}</td>
        </tr>
      ))}
    </table>
  );
}

使用时需要在根组件外层包裹CodeProvider：

// 根组件示例
import { CodeProvider } from './ScannerResultTable';

function App() {
  return (
    <CodeProvider>
      {/* 其他组件和ScannerResultTable */}
    </CodeProvider>
  );
}

关键注意事项 #

• 不要直接修改原数组（比如codes.push），必须创建新数组（[...codes, newItem]），这样才能保证状态变化被正确追踪。
• 方法1中一定要在组件卸载时取消订阅，避免内存泄漏。
• 方法2中所有需要调用addNewCode的组件，都要通过useAddNewCode Hook获取函数，确保能正确更新Context中的状态。

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