我不明白为什么我的 React 站点在使用 react-context 时不呈现答案

【问题标题】：I can't figure out why my React site doesn't render when using react-context我不明白为什么我的 React 站点在使用 react-context 时不呈现
【发布时间】：2023-02-03 00:17:59
【问题描述】：

我正在尝试实现 React Context 功能，但出于某种原因，我似乎无法成功呈现页面。当我启动该网站时，它只是保持空白。即使它编译没有任何错误。

我有一个 App.js，其中编写了主要代码：

import './App.css';
import { UserProvider, useUser } from "./UserContext";

const LoggedInUser = () => {
  const { user } = useUser();
  return (
    <p>
      Hello <span className="Username">{user.name}</span>
    </p>
  );
};

const Header = () => {
  return (
    <header>
      <h2>Blog App</h2>
      <LoggedInUser />
    </header>
  );
};

const Page = () => {
  const { user } = useUser();
  return (
    <div>
      <h2>What is Lorem ipsum?</h2>
      <p>
        Lorem ipsum dolor sit amet...
      </p>
      <p>Written by {user.name}</p>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <h1>hello</h1>
      <Header />
      <Page />
    </div>
  );
}

function Root() {
  return (
    <UserProvider>
      <App />
    </UserProvider>
  );
}

export default Root;

然后是 UserContext.js 文件：

import { createContext, useContext, useState } from "react";

const UserContext = createContext(undefined);

export const UserProvider = ({children}) => {
  const [user] = useState({
    name: "John",
    email: "john@example.com",
    dob: "01/01/2000"
  })
  return <UserContext.Provider value={{ user }}></UserContext.Provider>
}

export const useUser = () => useContext(UserContext);

最后是 index.js 文件，它可能与此问题相关，也可能不相关：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
reportWebVitals();

如果我使用 export default App 而不是 export default Root 并在 App 的返回页面中注释 <Header /> 和 <Page /> 组件，页面会显示 hello。但是，如果我离开export default Root并评论<Header />和<Page />，问候文本标题就会消失。

【问题讨论】：

使用里面的孩子UserProvider：<UserContext.Provider value={{ user }}>{children}</UserContext.Provider>

标签： javascript reactjs react-context

【解决方案1】：

这是因为您没有在 UserContext 中传递 children。代码应更正为：

import { createContext, useContext, useState } from "react";

const UserContext = createContext(undefined);

export const UserProvider = ({children}) => {
  const [user] = useState({
    name: "John",
    email: "john@example.com",
    dob: "01/01/2000"
  })
  return <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>
}

export const useUser = () => useContext(UserContext);

【讨论】：

【解决方案2】：

你的用户提供者没有渲染它的 children 道具。

我们都有那些日子。

【讨论】：

这是对正在发生的事情的描述，而不是对如何修复它的解释。