React使用AuthContext时出现setAuth is not a function警告如何解决

你创建AuthContext时定义的默认值是状态值+更新函数的数组结构，但在_app.js中给AuthContext.Provider传递value属性时，只传了状态变量auth，没有把对应的更新函数一并传入。因此你在业务组件中通过useContext(AuthContext)获取到的值里，第二个位置根本不是函数，调用setAuth自然会触发类型错误。

• 先确认你在_app.js中是通过useState声明的认证状态，写法符合如下格式：

const [auth, setAuth] = useState({
  access_token: null,
  refresh_token: null,
  expires_at: null,
  expires_in: null,
  email: null,
  google_metadata: null,
  is_email_verified: null,
  provider: null,
  token_type: null,
  uid: null
})

• 修改_app.js中AuthContext.Provider的value属性，把完整的数组结构传入即可：

<AuthContext.Provider value={[auth, setAuth]}>
  <CustomLayout>
    <Component {...pageProps} />
  </CustomLayout>
</AuthContext.Provider>

• 额外检查项：确认你调用setAuth的组件里，是通过数组结构取值const [auth, setAuth] = useContext(AuthContext)，不要误写成对象解构。

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