使用React Context时页面空白无法渲染问题求助

核心错误点及修复方案 #

1. UserProvider 未渲染子组件 #

在UserContext.js中，UserProvider组件返回的UserContext.Provider标签没有包含children，导致被包裹的<App />完全没有被渲染，这就是导出Root时连hello都不显示的原因。

修改前代码：

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

2. index.js 导入的组件不匹配 #

App.js默认导出的是Root组件，但index.js里导入的是App，导致实际渲染的是未被UserProvider包裹的App组件。此时Header和Page中调用useUser()会拿到初始值undefined，解构user.name时会触发运行时错误，导致页面空白（编译阶段不会检测到这类运行时错误）。

修改index.js的导入及渲染代码：

// 替换原导入语句
import Root from './App';

// 渲染Root组件
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>
);

验证修复 #

完成上述两处修改后，重新启动项目，页面会正常渲染hello文本、Header中的用户信息以及Page内容，Context数据能正确传递到各个使用useUser()的组件中。

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