调用useContext()时React Context未定义的问题排查

为什么提示UserContext未定义？ #

你当前把UserContext定义在App函数内部，属于局部变量，RegistrationForm这类外部组件根本无法访问到它。必须将UserContext移到App函数外部并导出，子组件才能通过导入使用它。

修改后的App.js代码 #

// 把Context定义在函数外部并导出，让子组件能访问到
export const UserContext = createContext({
  loggedUser: null,
  setLoggedUser: () => {},
});

function App() {
  const [loggedUser, setLoggedUser] = useState(null);

  const value = {
    loggedUser,
    setLoggedUser,
  };

  useEffect(() => {
    setLoggedUser(localStorage.getItem("user"));
  }, []);

  return (
    <UserContext.Provider value={value}>
      {/* 你的子组件们 */}
    </UserContext.Provider>
  );
}

export default App;

修改后的RegistrationForm代码 #

import { UserContext } from './App'; // 根据实际文件路径调整

export default function RegistrationForm({ onClick }) {
  const navigate = useNavigate();
  const { setLoggedUser } = useContext(UserContext);
  // ... 其他业务代码
}

Context Provider和Consumer的作用 #

Provider的作用 #

• 作为Context的「数据提供者」，它会把value属性中的数据，传递给所有嵌套在它内部的组件，无论组件层级有多深。
• 当value中的数据发生变化时，所有依赖这个Context的组件都会自动重新渲染，确保数据同步。

Consumer的作用 #

• 作为Context的「数据消费者」，主要用于类组件（因为类组件无法使用useContext Hook）。
• 使用时需要传入一个函数作为子元素，这个函数会接收Context的当前值，返回对应的渲染内容。函数组件现在更推荐用useContext，但Consumer依然可以正常使用。

内容的提问来源于stack exchange，提问作者Qoussay El Akkari