React Context使用求助：无法向Introduce组件传递值

你的代码核心问题出在UserProvider组件中——你定义了UserContext.Provider但没有返回它，导致上下文无法正确传递到子组件中。

修复步骤 #

1. 修正UserContext文件的UserProvider组件 #

将UserProvider中的JSX代码用return返回，确保上下文能包裹所有子组件：

import React, { createContext, useContext } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [user] = React.useState({
    name: 'Williams',
    email: 'William@gmail.com',
    age: 30,
  });

  // 关键：返回Provider组件并传入children
  return (
    <UserContext.Provider value={{ user }}>
      {children}
    </UserContext.Provider>
  );
}

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

2. 验证其他文件的正确性 #

你的App.js和index.js代码逻辑是正确的：

• index.js中已经用UserProvider包裹了App，确保整个应用层级能访问上下文
• Introduce组件通过useUser钩子获取上下文值的写法没有问题

修复后，Introduce组件就能正常读取到user.name并渲染内容了。

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