使用useContext全局存储用户信息时组件两次渲染且state异常求助

先帮你拆解两个核心问题：组件两次渲染的原因，以及state变成undefined的可能诱因，再给出对应的修复方案。

一、组件两次渲染的常见原因 #

1. React StrictMode 的开发环境检测 #

在 React 18+ 的开发环境中，StrictMode 会刻意让组件、useReducer 等钩子执行两次渲染/初始化，目的是帮你提前发现意外的副作用（比如未清理的定时器、重复的订阅）。这种重复渲染只会在开发环境出现，生产环境会自动消失，属于正常的检测机制。

2. Context Value 频繁更新导致的重复渲染 #

看你的 StateProvider 代码，每次组件渲染时都会创建一个全新的 { state, dispatch } 对象作为 Provider 的 value：

return <Provider value={{ state, dispatch }}>{children}</Provider>;

哪怕 state 没有变化，这个新对象也会触发所有订阅该 Context 的组件重新渲染，这是 React 对比引用类型的特性导致的。

二、state 变为 undefined 的排查方向 #

从你的 store.js 代码来看，初始 state 是明确的 { accessToken: '', expirationDate: '', fullName: '' }，出现 undefined 大概率是以下情况：

• dispatch 时未传入有效的 payload：比如你在某个地方调用了 dispatch({ type: 'login' }) 但没有传 payload，或者 payload 本身是 undefined。虽然 ...payload 不会直接让 state 变成 undefined，但如果后续有其他逻辑依赖 payload 的值，可能间接导致异常。
• 组件在 Provider 外部调用 useContext：虽然你说 Provider 全局配置了，但如果某个组件的渲染层级不在 StateProvider 内部，调用 useContext(store) 会拿到初始的 initialState？不对，初始 state 也不是 undefined，所以这个可能性较低。建议检查所有使用 useContext(store) 的组件是否都被 StateProvider 包裹。

三、修复方案 #

1. 缓存 Context Value，避免不必要的重复渲染 #

用 useMemo 缓存 Provider 的 value，只有当 state 变化时才重新创建对象：

import React, { createContext, useReducer, useMemo } from 'react';
const initialState = { accessToken: '', expirationDate: '', fullName: '' };
const store = createContext(initialState);
const { Provider } = store;
const StateProvider = ({ children }) => {
  const [state, dispatch] = useReducer((state, action) => {
    const { type, payload } = action;
    switch (type) {
      case 'login':
        // 这里可以加个判断，确保payload是有效对象
        if (!payload) return state;
        return { ...state, ...payload };
      default:
        throw new Error();
    }
  }, initialState);

  // 用useMemo缓存value，只有state变化时才更新
  const contextValue = useMemo(() => ({ state, dispatch }), [state]);

  return <Provider value={contextValue}>{children}</Provider>;
};
export { store, StateProvider };

2. 排查 dispatch 的调用逻辑 #

确保所有调用 dispatch({ type: 'login', payload }) 的地方，payload 都是包含正确字段的对象（比如 { accessToken: 'xxx', fullName: 'xxx' }），避免传入 undefined 或者空对象导致意外的 state 覆盖。

3. 区分开发环境的双重渲染 #

如果是 StrictMode 导致的开发环境两次渲染，完全不需要担心——这是 React 的内置检测机制，生产环境会自动移除这个行为，不会影响用户体验。

验证方法 #

1. 暂时移除 index.js 中的 <StrictMode> 标签，看组件是否还会两次渲染（只是验证，开发环境建议保留 StrictMode）。
2. 在 useReducer 的 login case 里加 console.log，打印每次的 action.payload，确认是否是有效数据。

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