为什么Context.Provider内部函数式children调用useContext只能拿到默认值

• 违反React Hook调用规则：Hook只能在React函数组件顶层或者自定义Hook顶层调用，你代码中的立即执行函数（IIFE）属于普通函数同步执行，不属于合法的Hook调用场景，React无法正确关联当前渲染树的上下文状态。
• 执行时机不匹配：IIFE在父组件生成JSX阶段就同步执行，此时<Context.Provider>还未被React挂载到渲染树，上下文值的注入逻辑还未生效，只能拿到createContext传入的默认值undefined。

你封装了自定义Hook、未导出Context的场景下，不需要用到Context.Consumer，只需要把调用Hook的逻辑抽为独立函数组件，放在Context.Provider内部渲染即可。

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

const Context = createContext(undefined);
// 模拟你另一个文件封装的未导出Context的自定义Hook
function useCustomContext() {
  return useContext(Context);
}

// 抽为独立的子组件
function InnerContent() {
  const context_value = useCustomContext();
  console.log(context_value); // 输出 {variable: 123}
  return <></>;
}

export default function Component() {
  return (
    <Context.Provider value={{ variable: 123 }}>
      <InnerContent />
    </Context.Provider>
  );
}

如果不想额外声明独立组件，也可以用行内返回组件实例的写法：

export default function Component() {
  return (
    <Context.Provider value={{ variable: 123 }}>
      {(() => {
        // 内部定义组件，返回组件实例而非直接执行Hook逻辑
        const Inner = () => {
          const context_value = useCustomContext();
          console.log(context_value);
          return <></>
        }
        return <Inner />
      })()}
    </Context.Provider>
  );
}

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