时间戳

首页 > 解决方案 > 具有 React 上下文的当前用户

reactjs - 具有 React 上下文的当前用户

问题描述

我想有一种方法来使用 React Context 获取和获取当前用户（不将道具传递给我的所有组件）

我尝试使用 React Context，但不明白如何const { currentUser, fetchCurrentUser } = useCurrentUser()从文档中获得类似的东西。

标签： reactjsauthenticationreact-context

解决方案

这是我为我的项目所做的：

// src/CurrentUserContext.js
import React from "react"

export const CurrentUserContext = React.createContext()

export const CurrentUserProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = React.useState(null)

  const fetchCurrentUser = async () => {
    let response = await fetch("/api/users/current")
    response = await response.json()
    setCurrentUser(response)
  }

  return (
    <CurrentUserContext.Provider value={{ currentUser, fetchCurrentUser }}>
      {children}
    </CurrentUserContext.Provider>
  )
}

export const useCurrentUser = () => React.useContext(CurrentUserContext)

然后像这样使用它：

设置提供者：

// ...
import { CurrentUserProvider } from "./CurrentUserContext"
// ...

const App = () => (
  <CurrentUserProvider>
    ...
  </CurrentUserProvider>
)

export default App

并在组件中使用上下文：

...
import { useCurrentUser } from "./CurrentUserContext"

const Header = () => {
  const { currentUser, fetchCurrentUser } = useCurrentUser()

  React.useEffect(() => fetchCurrentUser(), [])

  const logout = async (e) => {
    e.preventDefault()

    let response = await fetchWithCsrf("/api/session", { method: "DELETE" })

    fetchCurrentUser()
  }
  // ...
}
...

完整的源代码可在 github 上找到：https ://github.com/dorianmarie/emojeet

并且可以在以下位置试用该项目：http: //emojeet.com/

如果useContext返回undefined，那么您可能忘记了提供者或需要将提供者移到堆栈上。

推荐阅读