使用React ContextAPI配置useReducer时报错TypeError: init is not a function如何解决

错误原因 #

• 核心原因是StateProvider.js中给useReducer传递了错误的第三个参数：

useReducer的参数规范为：

1. 第一个参数：reducer处理函数
2. 第二个参数：状态初始值
3. 可选第三个参数：init初始化函数，用于惰性计算初始状态，必须为函数类型
   你将React节点类型的children作为第三个参数传入useReducer，React会将其识别为init函数尝试调用，类型不匹配就抛出init is not a function错误。

• 潜在问题1：当前reducer.js中ADD_TO_BASKET、REMOVE_FROM_BASKET分支没有返回新状态，后续补全业务逻辑时需要补充return语句，否则状态更新不会生效。
• 潜在问题2：代码中变量名intialState存在拼写错误，正确拼写为initialState，如果后续其他模块用正确拼写引用会触发取值报错，建议全局统一修正。

修复代码 #

修改StateProvider.js中的StateProvider组件，移除传入useReducer的第三个参数即可：

// 修正后的StateProvider组件代码
const StateProvider = ({ reducer, intialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, intialState)}>
    {children}
  </StateContext.Provider>
);

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