如何在React的createContext中配合Hook使用？遇钩子调用错误求助

问题核心 #

你触发的错误是因为Hook只能在函数组件或自定义Hook的顶层调用，直接在组件外部调用useUtils()违反了React的Hook规则。另外createContext确实需要在组件外部定义以便导出，但Context的默认值不需要用Hook生成——默认值只是组件未被Provider包裹时的兜底值，真正的动态状态应该在Provider组件内部处理后传递。

正确实现方案 #

1. 外部定义Context（用静态兜底值） #

先在组件外部创建Context，默认值用静态占位符即可，不需要在这里调用Hook：

// 组件外部定义Context，默认值用静态结构占位
export const ScheduleContext = createContext({
  scheduleStartDate: null,
  // 其他需要的默认属性...
});

2. 在Provider组件内部生成动态值 #

在SchedulesProvider组件内部合法调用Hook，计算动态日期后通过Provider的value传递：

export function SchedulesProvider({ children }) {
  // 在组件内部合法调用Hook
  const utils = useUtils();
  // 计算动态日期
  const scheduleStartDate = utils.date().add(2, "days");

  return (
    <ScheduleContext.Provider
      value={{
        scheduleStartDate,
        // 其他需要传递的状态或方法...
      }}
    >
      {children}
    </ScheduleContext.Provider>
  );
}

3. 子组件中使用Context #

子组件直接通过useContext获取Provider传递的动态值即可：

function TargetChildComponent() {
  const { scheduleStartDate } = useContext(ScheduleContext);
  // 这里直接使用计算后的动态日期
  return <div>起始日期：{scheduleStartDate?.format("YYYY-MM-DD")}</div>;
}

关键提示 #

• Context的默认值不会覆盖Provider传递的实际值，它只是组件脱离Provider范围时的备用值，所以完全不需要在这里做动态计算。
• 所有依赖Hook的动态逻辑，必须放在函数组件或自定义Hook的内部，这是React Hook的强制规则。

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