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

Question

我想有一种方法可以使用 React Context 获取和获取当前用户(不将 props 传递给我的所有组件)

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

Answer 1

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

// 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，那么您可能忘记了 Provider 或者需要将您的 Provider 移到堆栈中。