Question

我正在使用上下文api设置当前登录的用户。

UserContext.ts

const UserContext = createContext<IUser>({} as IUser);

export default UserContext;

我在其中设置用户的Layout组件：

const Layout: React.FunctionComponent<Props> = ({ children }) => {
  const router = useRouter();
  const [user, setUser] = useState<IUser>({} as IUser);

  const getUser = async () => {
    const { data } = await axios.get('me');
    setUser(data);
  }

  useEffect(() => {
    getUser();
  }, []);

  return (
    <main>
      <UserContext.Provider value={user}>
        {children}
      </UserContext.Provider>
    </main>
  )

所以我从api中获取用户数据，我得到了正确的数据。然后，将用户作为我的UserContext.Provider的值。

在另一个组件中，我尝试像这样访问用户数据：

const Movies: NextPage<MovieProps> = props => {
  const userContext = useContext(UserContext);
  console.log("------------");
  console.log(userContext);
  console.log("------------");
}

控制台仅返回一个空对象。

打字稿在上下文上反应setState不返回任何内容

0 个答案: