如何在自定义Context添加初始值后仍触发外部使用报错？

核心思路是用唯一的哨兵值替代原逻辑里的undefined，以此区分“未在Provider内使用”和“Provider提供的合法值”两种场景，具体实现步骤如下：

1. 创建全局唯一的哨兵值
   使用Symbol生成一个不会与业务值冲突的唯一标识：

   const UNWRAPPED_CONTEXT = Symbol('UNWRAPPED_CONTEXT');
   

2. 修改Context的初始值
   将createContext的初始值设置为这个哨兵值：

   const DarkModeContext = createContext(UNWRAPPED_CONTEXT);
   

3. 更新钩子的检查逻辑
   在useDarkMode中判断上下文是否为哨兵值，若是则抛出错误：

   function useDarkMode() {
     const context = useContext(DarkModeContext);
     if (context === UNWRAPPED_CONTEXT) {
       throw new Error("DarkModeContext was used outside of DarkModeProvider");
     }
     return context;
   }
   

4. Provider正常传递业务值
   你的Provider组件依然可以正常传入包含业务逻辑的上下文值，不受任何影响：

   function DarkModeProvider({ children }) {
     const [isDarkMode, setIsDarkMode] = useState(false);
     const toggleDarkMode = () => setIsDarkMode(prev => !prev);
   
     return (
       <DarkModeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
         {children}
       </DarkModeContext.Provider>
     );
   }
   

这样设置后，组件在DarkModeProvider外部调用useDarkMode时会触发错误提示，在Provider内部则能正常获取业务上下文。

内容的提问来源于stack exchange，提问作者Niv G.