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

Question

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

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

主页.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;

我在这里得到 null 而不是用户数据。

Answer 1

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

第一次用户将只是空的，因为它是您的初始 state

const [user, setUser] = useState(null)

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

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

像这样的东西

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">

    ....
)