React useContext 无法获取作为上下文值传递的用户数据

Question

我正在为我的 React 应用程序使用 google 登录，我想将来自 google 登录的响应（即用户数据）传递给使用 useContext 挂钩的其他 React 组件，但我没有获取用户数据那里。

这是我的 Home.js 文件，我在其中使用 createContext 创建上下文。在这里，我将来自 google auth 的响应存储在一个名为 user 的状态中，并将该用户作为 UserContext.Provider.

中的值传递

Home.js

import React from "react";
import { GoogleLogin } from "react-google-login";

export const UserContext = React.createContext(null);

const Home = (props) => {
  const baseUrl = process.env.REACT_APP_HEROKU_URL;
  const [user, setUser] = React.useState();

  // Getting response from Google Login
  const responseGoogle = (res) => {
      const googleresponse = {
          UserId: res.googleId,
          Name: res.profileObj.name,
          Email: res.profileObj.email,
          Canvas: "",
      };

      setUser(googleresponse);

    

      const requestOptions = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(googleresponse),
      };

    // Sending User data to backend
    fetch(baseUrl + "User", requestOptions)
      .then((res) => {})
      //.then((data) => console.log(data))
      .catch((err) => console.log(err));

    props.history.push("/board");
  };

  return (
     <UserContext.Provider value={{ user }}>
      <div className="sign-up-mode">
        <div className="panels-container">
          <div className="panel left-container">
            <div className="content">
              <p>
                Login with your gmail id and start using kanban for better
                experience!
              </p>
              <GoogleLogin
                clientId="xxxxxxxxxxxxxxxxxxxxhoubs.apps.googleusercontent.com"
                buttonText="Login with Google"
                onSuccess={responseGoogle}
              />
            </div>
          </div>
        </div>
      </div>
    </UserContext.Provider>
  );
};


export default Home;

这是我尝试访问 UserContext 详细信息的组件。 Canvas.js

import React, { useState } from "react";
import { UserContext } from "./Home";

const Canvas = () => {
  const user = React.useContext(UserContext);
  console.log("GUSer",user);
}
export default Canvas;

我在这里得到的是空值而不是用户数据。

Answer 1

这很可能是由于获取数据的异步行为所致。

第一次用户会是空的，因为这是你的初始状态

const [user, setUser] = useState(null)

//顺便说一句，您应该始终使用 null 或空对象进行初始化

我建议使用一些状态来控制数据是否正在加载，并且 return 在您的主要内容呈现之前

像这样

const [user, setUser] = useState(null)
const [loading, setLoading] = useState(false)

useEffect(() =>{
  setLoading(true)
  fetch(...)
   .(...)
  .then(data =>{
  setLoading(false)
  setUser(data)
}
}, [])


if(loading) return <div> loading... please wait </div>


return(
  <UserContext.Provider value={{ user }}>
      <div className="sign-up-mode">

    ....
)

React useContext 无法获取作为上下文值传递的用户数据

Unable to get user Data passed as a context value by React useContext

javascript

reactjs

react-hooks

use-context

react-google-login