在上下文提供商中使用状态设置在组件中获取调用

Question

我有一个上下文提供商，在其中进行了调用以获取当前的用户ID，然后将其设置为在其他组件中使用的状态。

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

  const fetchCurrentUser = async () => {
    let response = await fetch("http://127.0.0.1:5000/dj-rest-auth/user/", authRequestOptions('GET'))
    response = await response.json()
    setCurrentUser(response.pk)
  }

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

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

我的目标是，在页面加载时，请在组件中调用fetchcurrentuser，然后使用由此作为另一个API调用的一部分设置的当前使用者状态。我在下面尝试过的内容：

useEffect(() => {
    fetchCurrentUser()
}, [])

useEffect(() => {
    fetch(`http://127.0.0.1:5000/api/user-conversation-brief/${currentUser}`, requestOptions('GET'))
        .then(response => response.json())
        .then(data => {
            setSideBarMessages(data)
            setLoading(true)
        })
        .catch(error => console.log(error))
}, [currentUser])

但这在初始页面渲染上不起作用。我将如何按预期运行？