React类组件通过contextType获取Context API值为空问题求解

类组件读取Context值为空是两个问题导致的，核心是Context绑定错误，另有一处逻辑笔误：

• 核心错误：类组件的static contextType要求绑定createContext()生成的原始Context实例，但你代码里给contextType赋值的是自定义封装的UseFeaturesContext Hook。Hook本身是只能在函数组件/自定义Hook内调用的函数，不是Context实例，类组件无法通过它识别对应的Context，自然读不到Provider下发的值。这也是为什么函数组件用这个自定义Hook能正常读值，类组件不行——函数组件里Hook内部是正常调用useContext绑定了正确的Context，类组件绑错了对象。
• 隐藏逻辑笔误：FeaturesProvider中判断document_library的localStorage开关时，错误地给np_upload_files赋值，document_library字段永远为false，和读值问题无关，但会导致开关逻辑失效。

1. 调整Context.tsx，导出原始的Context实例供类组件使用，同时修复逻辑笔误：

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

const FeaturesContext = createContext(undefined);

export const UseFeaturesContext = () => {
  return useContext(FeaturesContext);
};

// 导出原始Context实例，给类组件使用
export { FeaturesContext };

export const FeaturesProvider = props => {
  let doc_lib_change_permissions = localStorage.getItem('doc_lib_change_permissions') === 'true';
  let np_upload_files = localStorage.getItem('np_upload_files') === 'true';
  let document_library = localStorage.getItem('document_library') === 'true';

  const FeaturesSwitches = {
    doc_lib_change_permissions,
    np_upload_files,
    document_library,
  };
  return <FeaturesContext.Provider value={FeaturesSwitches}>{props.children}</FeaturesContext.Provider>;
};

2. 修改类组件的导入和contextType绑定，替换为原始Context实例：

import React from 'react';
// 导入原始Context，不要导入自定义Hook
import { FeaturesContext } from '../../../../components/context/Features';

class Index extends React.Component {
   static contextType = FeaturesContext;
   componentDidMount() {
     const features = this.context;
     console.log(features); // 可正常读取到FeaturesSwitches对象
   }

   render() {
     // 组件渲染逻辑
     return null
   }
}

说明：你封装的UseFeaturesContext属于自定义Hook，仅适用于函数组件场景，类组件无法通过Hook读取Context，必须直接绑定原始Context实例到contextType属性，或者用FeaturesContext.Consumer的render props模式读取值。

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