使用React Context API时组件无法渲染的问题排查与修复

问题原因 #

你的代码中UserProvider组件的疏漏导致了页面空白——在UserContext.Provider的JSX结构里，没有渲染传入的children属性。这意味着被UserProvider包裹的App组件完全没有被渲染，所以页面显示为空；又因为没有语法或运行时错误，控制台也不会输出报错信息。

修复方法 #

修改UserContext.js中的UserProvider组件，确保UserContext.Provider标签内包含{children}，这样就能正确渲染所有子组件：

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

const UserContext = createContext({});

export const UserProvider = ({ children }) => {
  const [user] = useState({
    name: "John",
    email: "john@example.com",
    dob: "01/01/2000",
  });
  // 添加{children}，让Provider渲染内部子组件
  return <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>;
};

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

效果验证 #

修改完成后，UserProvider会正确传递Context数据并渲染内部的App组件，页面就能正常显示博客标题、正文以及用户名称等内容了。

内容的提问来源于stack exchange，提问作者Ishan Choudhary