具有 React Context 的当前用户

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，那么您可能忘记了提供程序或者需要将您的提供程序向上移动。