Next.js：静态JS文件变量更新后如何在组件中实时展示

先修正代码里的基础错误 #

1. 拼写错误：组件里写的是FunctionServices.accountID（大写D），但服务文件里定义的是accountId（小写d），这直接导致显示为空。
2. 函数调用错误：按钮点击事件里FunctionServices.initconnect没有加括号，应该写成() => FunctionServices.initconnect()，否则点击不会执行连接函数。
3. 状态感知缺失：服务里的accountId是普通JS变量，React组件无法自动监听它的变化，就算变量更新了，组件也不会重新渲染。

方案一：给服务添加订阅机制，绑定React状态 #

这种方式适合不想用全局Context的场景，让服务支持外部监听账号变化，组件订阅后更新自身状态。

修改functionServices.js：

let accountId;
const subscribers = [];

// 通知所有订阅者账号更新
function notifySubscribers() {
  subscribers.forEach(callback => callback(accountId));
}

async function initconnect() {
  connect.pairingEvent.once(pairingData => {
    pairingData.accountIds.forEach(id => {
      accountId = id;
      console.log(`The account id is ${accountId}`);
      notifySubscribers(); // 更新后触发订阅回调
    });
  });
}

// 供组件订阅账号变化的方法
function subscribeToAccountId(callback) {
  subscribers.push(callback);
  callback(accountId); // 立即返回当前账号
  // 返回取消订阅的函数，避免内存泄漏
  return () => {
    const index = subscribers.indexOf(callback);
    if (index !== -1) subscribers.splice(index, 1);
  };
}

export default { accountId, initconnect, subscribeToAccountId };

修改Connect组件：

import { useState, useEffect } from 'react';
import FunctionServices from "../services/functionServices";

export default function Connect() {
  const [accountId, setAccountId] = useState(null);

  useEffect(() => {
    // 订阅账号变化，更新组件状态
    const unsubscribe = FunctionServices.subscribeToAccountId(setAccountId);
    // 组件卸载时取消订阅
    return unsubscribe;
  }, []);

  return (
    <>
      <span>{accountId}</span>
      <button onClick={() => FunctionServices.initconnect()}>连接</button>
    </>
  );
}

方案二：用Context API做全局状态管理 #

如果多个组件都需要用到账号信息，用Context更方便，把状态统一放到全局上下文里。

1. 创建AccountContext.js：

import { createContext, useContext, useState, useEffect } from 'react';
import FunctionServices from "../services/functionServices";

const AccountContext = createContext();

export function AccountProvider({ children }) {
  const [accountId, setAccountId] = useState(null);

  useEffect(() => {
    const unsubscribe = FunctionServices.subscribeToAccountId(setAccountId);
    return unsubscribe;
  }, []);

  // 把连接方法也封装到Context里
  const initConnect = () => FunctionServices.initconnect();

  return (
    <AccountContext.Provider value={{ accountId, initConnect }}>
      {children}
    </AccountContext.Provider>
  );
}

// 自定义Hook，简化组件消费Context的代码
export function useAccount() {
  return useContext(AccountContext);
}

2. 在_app.js（Next.js全局入口）里包裹Provider：

import { AccountProvider } from '../contexts/AccountContext';

export default function App({ Component, pageProps }) {
  return (
    <AccountProvider>
      <Component {...pageProps} />
    </AccountProvider>
  );
}

3. 修改Connect组件：

import { useAccount } from '../contexts/AccountContext';

export default function Connect() {
  const { accountId, initConnect } = useAccount();

  return (
    <>
      <span>{accountId}</span>
      <button onClick={initConnect}>连接</button>
    </>
  );
}

核心逻辑说明 #

React组件的重新渲染只依赖状态（useState）、props、上下文的变化，普通JS变量的更新不会触发组件刷新。所以必须把服务里的账号变量和React的状态绑定，通过订阅或Context的方式，让变量变化时主动通知组件更新状态，这样组件才会重新渲染并显示最新的账号值。

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