React组件初始加载时从Reducer获取的值为undefined问题

核心问题1：Reducer函数写法错误 #

你的reducer把第二个参数直接当作新状态合并，但这个参数实际是action对象（React初始化时会传入{type: '@@INIT'}，手动更新状态时也需要传入带type的action）。这种写法会把action的字段（比如type）混入state，还无法正确区分不同类型的状态更新。

核心问题2：useReducer初始状态传递异常 #

从你给出的组件代码片段来看，useReducer的调用可能被截断或显式传递了undefined作为初始状态参数。当useReducer接收undefined作为初始状态时，reducer初始化时的state会是undefined，执行{...state, ...newState}后得到的对象仅包含action字段，没有version和detail，所以访问这两个属性时返回undefined。

修正后的代码 #

1. 正确的Reducer写法 #

const initialState = {
  version: '',
  detail: ''
};

const versionReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_VERSION':
      return { ...state, version: action.payload };
    case 'SET_DETAIL':
      return { ...state, detail: action.payload };
    default:
      // 必须返回当前state，禁止返回undefined
      return state;
  }
};

export default versionReducer;
// 如需在组件中复用初始状态，可添加导出
export { initialState };

2. 组件中正确调用useReducer #

// 写法一：不传递初始状态，使用reducer内部的默认初始值
const [componentState, dispatchComponentState] = useReducer(versionReducer);

// 写法二：显式传递初始状态（需先导出initialState）
import versionReducer, { initialState } from './你的reducer文件路径';
const [componentState, dispatchComponentState] = useReducer(versionReducer, initialState);

3. 正确的状态更新方式 #

后续更新状态时，需要dispatch对应的action：

// 更新version
dispatchComponentState({ type: 'SET_VERSION', payload: 'v1.0.0' });
// 更新detail
dispatchComponentState({ type: 'SET_DETAIL', payload: '版本更新详情' });

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