在 React js 中使用上下文 api 显示白色空白屏幕答案

【问题标题】：Showing white blank screen with the use of context api in React js在 React js 中使用上下文 api 显示白色空白屏幕
【发布时间】：2022-08-10 15:02:22
【问题描述】：

在 React js 中使用上下文 api 显示白色空白屏幕我正在运行没有错误的代码，但是当我访问 localhost:3000 我得到一个空白屏幕。这些是项目中的 React js 文件，如果我不使用 Context-API，编码效果很好。

 App.js
import \"./App.css\";
import { UserContextProvider } from \"./contexts/user\";
import { Home } from \"./pages\";
function App() {
  return (
    <div className=\"app\">
      <UserContextProvider>
        <Home />
      </UserContextProvider>
    </div>
  );
}

export default App;

    user.js
import { createContext, useState } from \"react\";
export const UserContext = createContext();
export const UserContextProvider = (props) => {
  const [user, setUser] = useState(null); // user value can be used anywhere

  return (
    <UserContext.Provider value={{user: [user,setUser]}}>
    {props.childern}
    </UserContext.Provider>
  );
};

 SignInBtn.js
    import React,{useContext} from \"react\";
    import \"./style.css\";
    import GoogleIcon from \"@mui/icons-material/Google\";
    import { signInWithGoogle } from \"../../services/auth\";
    import { UserContext } from \"../../contexts/user\";
    const icon = {
      fontSize: 14,
    };
    function SignInBtn() {
      const [user, setUser] = useContext(UserContext).user;
    
      const signInBtnClick = async () =>{
        let userBySignIn = await signInWithGoogle()
        if(userBySignIn) setUser(userBySignIn)
      }
      return (
        <div className=\"signInBtn\" onClick={signInBtnClick}>
          <div className=\"btn\">
          <p>Signin with&nbsp;</p>
          <GoogleIcon style={icon}/>
          </div>
        </div>
      );
    }
    
    export default SignInBtn;

标签： reactjs react-hooks react-context use-context

【解决方案1】：

首先确保您的 SignInBtn 组件是 Context Provider 的子组件

其次

从此处删除 .user
const [user, setUser] = useContext(UserContext).user; 在 SignInBtn.js 中您从 UserContext 获取价值的地方。

你可以这样做

const {user} = useContext(UserContext);

const [user, setUser] = user

【讨论】：

【解决方案2】：

解决方案<>{props.children}</>

您应该在片段中附上 {props.childern}。或任何其他在任何情况下都不返回 null 的标签。

参考这个。 https://codesandbox.io/s/divine-shape-6rxws?file=/src/user.js:331-353 获取确切解决方案

【讨论】：

【解决方案3】：

你应该在 user.js 中导入 React 它会起作用的

【讨论】：