React Native Context setUser 不是一个函数

Question

我正在尝试使用 React Context 来管理用户是否登录。我到目前为止是这样的：

import AuthUserContext, { AuthUserProvider } from './Components/auth/AuthUserProvider';

function App() {
  const {user, setUser} = React.useContext(AuthUserContext)
  setUser('') // SetUser is not a function
}

App.tsx

import React, { useState, createContext } from 'react';
var user: any, setUser: any;

const AuthUserContext = React.createContext({user, setUser});
export default AuthUserContext;

export const AuthUserProvider = ({ children } : {children: any}) => {
  const [user, setUser] = useState(null);
  
  return (
    <AuthUserContext.Provider value={{ user, setUser }}>
      {children}
    </AuthUserContext.Provider>
  );
};

AuthUserProvider.tsx

这是错误：

TypeError: setUser is not a function. (In 'setUser('')', 'setUser' is undefined)

This error is located at:
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)

我是新来的本地反应，并且已经尝试解决这个问题几个小时。任何帮助表示赞赏。非常感谢！

Answer 1

问题

您的上下文的初始值似乎未定义。

var user: any, setUser: any;

const AuthUserContext = React.createContext({ user, setUser }); // both undefined

解决方案

定义上下文的形状。

var user: any, setUser: any;

const AuthUserContext = React.createContext({
  user: '',
  setUser: () => {}, // <-- indicate setUser is a function
});

见Updating Context from a Nested Component