React Router多页面全局唯一ID生成与跨页同步问题

问题根源 #

你当前的代码之所以失效，是因为uniqueId是基本类型（数字），当你export default uniqueId时，导出的是这个变量的值副本而非引用。其他模块导入后拿到的始终是初始值0，哪怕GenId修改了模块内部的uniqueId，导入的副本也不会同步更新。

可行解决方案 #

方案1：导出获取ID的函数（最简单）

修改genIds.js，新增一个获取当前ID的函数，利用函数闭包特性访问模块内部的最新变量：

// genIds.js
import './pages.css';

let uniqueId = 0;

export function GenId(){
  uniqueId++;
  console.log(uniqueId);
}

// 新增获取最新ID的函数
export function getUniqueId() {
  return uniqueId;
}

在handleSubmit中调用函数获取最新值：

import { GenId, getUniqueId } from './genIds';

const handleSubmit = (event) => { 
  event.preventDefault();
  toggleDisabled();
  GenId();
  console.log(getUniqueId()); // 这里能拿到更新后的ID
}

方案2：用对象包裹变量（引用传递）

把uniqueId放到对象里，因为对象是引用类型，导出后所有模块共享同一个引用：

// genIds.js
import './pages.css';

// 用对象包裹，保持引用一致性
const idStore = {
  uniqueId: 0
};

export function GenId(){
  idStore.uniqueId++;
  console.log(idStore.uniqueId);
}

export default idStore;

在handleSubmit中访问对象属性：

import { GenId } from './genIds';
import idStore from './genIds';

const handleSubmit = (event) => { 
  event.preventDefault();
  toggleDisabled();
  GenId();
  console.log(idStore.uniqueId); // 直接拿到最新值
}

方案3：React Context管理（适合需要UI响应变化的场景）

如果你的组件需要根据ID变化重新渲染UI，用React Context来管理全局状态更符合React的数据流：

1. 创建Context文件：

// IdContext.js
import { createContext, useContext, useState } from 'react';

const IdContext = createContext();

export function IdProvider({ children }) {
  const [uniqueId, setUniqueId] = useState(0);

  const genId = () => {
    // 更新并返回最新ID
    const newId = uniqueId + 1;
    setUniqueId(newId);
    return newId;
  };

  return (
    <IdContext.Provider value={{ uniqueId, genId }}>
      {children}
    </IdContext.Provider>
  );
}

// 自定义Hook简化访问
export function useId() {
  return useContext(IdContext);
}

2. 在根组件包裹路由：

// App.js
import { IdProvider } from './IdContext';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Page1 from './Page1';
import Page2 from './Page2';

function App() {
  return (
    <IdProvider>
      <Router>
        <Routes>
          <Route path="/page1" element={<Page1 />} />
          <Route path="/page2" element={<Page2 />} />
        </Routes>
      </Router>
    </IdProvider>
  );
}

3. 在页面组件中使用：

// Page1.js
import { useId } from './IdContext';

const Page1 = () => {
  const { uniqueId, genId } = useId();

  const handleSubmit = (event) => { 
    event.preventDefault();
    toggleDisabled();
    const newId = genId();
    console.log(newId); // 最新生成的ID
    console.log(uniqueId); // 组件会自动重新渲染，拿到更新后的值
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单内容 */}
      <button type="submit">提交</button>
    </form>
  );
};

export default Page1;

方案选择 #

• 方案1、2适合不需要UI跟随ID变化的简单场景，属于模块级全局变量，实现成本低。
• 方案3适合需要组件响应ID更新重新渲染的场景，是React官方推荐的全局状态管理方式。

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