具有 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 returns undefined，那么您可能忘记了提供者或需要将您的提供者移到堆栈中。

Answer 2

你没有解释你想用数据做什么但是......在你执行函数提取后使用效果。现在你有状态为 currentUser 的对象用户。在使用影响 currentUser 后尝试控制台日志，看看里面有什么数据。在你可以将它与 currentUser 一起使用之后。"whatever prop inside"..

具有 React 上下文的当前用户

Current user with React Context

authentication

reactjs

react-context