React经验值计数器开发求助：页面触发自动累加实现方案

要实现跨页面共享经验值并自动触发增加，核心是全局状态管理+页面挂载时触发更新。React新手用Context API就足够，不用复杂的Redux，步骤如下：

1. 创建全局经验值Context #

新建一个ExperienceContext.js文件，封装全局状态和更新逻辑：

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

const ExperienceContext = createContext();

export function ExperienceProvider({ children }) {
  // 从本地存储读取历史经验值，初始为0
  const [experience, setExperience] = useState(() => {
    return parseInt(localStorage.getItem('userExperience')) || 0;
  });

  // 经验值变更时自动存到本地，避免刷新丢失
  useEffect(() => {
    localStorage.setItem('userExperience', experience.toString());
  }, [experience]);

  // 定义增加经验值的方法
  const addExperience = (amount) => {
    setExperience(prev => prev + amount);
  };

  return (
    <ExperienceContext.Provider value={{ experience, addExperience }}>
      {children}
    </ExperienceContext.Provider>
  );
}

// 自定义钩子，简化组件调用Context的代码
export function useExperience() {
  return useContext(ExperienceContext);
}

2. 在根组件中包裹Provider #

把路由或整个App用ExperienceProvider包裹，让所有子组件都能访问全局经验值：

// App.jsx
import { ExperienceProvider } from './ExperienceContext';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import QuizCompletion from './QuizCompletion';
import Profile from './Profile';

function App() {
  return (
    <ExperienceProvider>
      <Router>
        <Routes>
          <Route path="/quiz-completion" element={<QuizCompletion />} />
          <Route path="/profile" element={<Profile />} />
          {/* 其他路由 */}
        </Routes>
      </Router>
    </ExperienceProvider>
  );
}

export default App;

3. 实现Quiz Completion页面 #

利用useEffect钩子，组件挂载（进入页面）时自动加15经验值：

// QuizCompletion.jsx
import { useEffect } from 'react';
import { useExperience } from './ExperienceContext';

function QuizCompletion() {
  const { addExperience } = useExperience();

  // 仅在组件首次挂载时执行一次
  useEffect(() => {
    addExperience(15);
  }, [addExperience]);

  return (
    <div>
      <h2>测验完成！</h2>
      <p>你获得了15点经验值</p>
      {/* 可添加跳转至个人资料的按钮 */}
    </div>
  );
}

export default QuizCompletion;

4. 实现个人资料页面 #

直接读取全局经验值并展示：

// Profile.jsx
import { useExperience } from './ExperienceContext';

function Profile() {
  const { experience } = useExperience();

  return (
    <div>
      <h2>个人资料</h2>
      <p>当前经验值：{experience}</p>
      {/* 其他个人信息内容 */}
    </div>
  );
}

export default Profile;

注意事项 #

• 用localStorage持久化数据，用户刷新页面后经验值不会丢失；
• useEffect的依赖数组必须包含addExperience，避免React的依赖警告；
• 如果要防止用户重复刷新页面刷经验，可以额外用sessionStorage标记是否已完成本次测验（根据需求可选）。

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