React使用Context Provider设置全局状态时提示setIsLoggedin不是函数

核心错误：Context Provider 的 value 传值格式错误 #

你在 SessionContext.Provider 的 value 属性传入值时，缺少了一层对象包裹的花括号：

// 错误写法
<SessionContext.Provider value={isLoggedIn, setIsLoggedIn}>{children}</SessionContext.Provider>

JSX 中 {} 内的逗号表达式只会返回最后一个运算值，也就是说你现在实际传入 Context 的只有 setIsLoggedIn 本身，并不是包含 isLoggedIn 和 setIsLoggedIn 两个属性的对象。当你在组件中用对象解构语法 const { setIsLoggedIn } = useContext(SessionContext) 取值时，相当于从函数类型的值上解构 setIsLoggedIn 属性，得到的结果是 undefined，调用时自然会报「不是函数」的错误。

修复方法 #

把 value 的传入值用对象包裹，修改为如下写法即可：

<SessionContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>{children}</SessionContext.Provider>

这里的两层花括号含义分别是：外层是 JSX 标识内部为 JS 表达式的语法，内层是对象字面量的语法。

额外注意项 #

注意检查变量名拼写的一致性：你在 SessionProvider 的 props 里定义的默认值是 isLoggedin（末尾的 i 为小写），和状态名 isLoggedIn（中间的 I 为大写）拼写不一致，建议统一拼写规则，避免后续传参时出现预期外的错误。

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