React中如何按条件通过useContext获取数据？

根据React钩子规则，钩子必须在组件的顶层调用，不能放在条件语句里。针对你的需求，这里提供几种可行的合法实现方式：

方案一：始终调用useContext，按需使用数据 #

不管type是什么，都在组件顶层正常调用useContext，只在type = 'typeA'时使用获取到的ourInfosObj。这种方式完全符合钩子规则，而且useContext本身开销极低，不会有性能问题。

function FancyComponent({ names = [], id = null, type = 'typeA' }) {
    // 顶层调用useContext，符合规则
    const { ourInfosObj } = useContext(GlobalContext);
    
    // 仅在需要时使用数据
    if (type === 'typeA') {
        // 这里写依赖ourInfosObj的逻辑
        console.log(ourInfosObj);
    }

    // 组件其他逻辑
    return <div>...</div>;
}

方案二：拆分组件，分离不同类型的逻辑 #

把依赖ourInfosObj的部分抽成独立子组件，父组件仅在type = 'typeA'时渲染这个子组件。这种方式不仅符合钩子规则，还能让代码职责更清晰，便于维护。

// 仅处理typeA场景的子组件
function TypeAContent() {
    const { ourInfosObj } = useContext(GlobalContext);
    // 这里写typeA专属的UI或逻辑
    return <div>{ourInfosObj?.someProperty}</div>;
}

function FancyComponent({ names = [], id = null, type = 'typeA' }) {
    return (
        <div>
            {/* 组件共用内容 */}
            {type === 'typeA' && <TypeAContent />}
        </div>
    );
}

方案三：使用空上下文作为默认值（不推荐，仅作补充） #

如果不想始终获取GlobalContext，可以创建一个空的上下文对象作为备选，避免传入null导致的报错。不过这种方式需要额外定义空上下文，代码相对繁琐，优先级低于前两种方案。

// 创建空上下文，默认值设为包含ourInfosObj的空结构
const EmptyContext = createContext({ ourInfosObj: null });

function FancyComponent({ names = [], id = null, type = 'typeA' }) {
    // 传入合法的上下文对象，避免报错
    const { ourInfosObj } = useContext(type === 'typeA' ? GlobalContext : EmptyContext);
    
    if (type === 'typeA' && ourInfosObj) {
        // 处理逻辑
    }

    return <div>...</div>;
}

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