React Context代码按官方示例配置却不生效，求问题排查及解决方法

问题原因 #

你代码的错误出在Level2_Child1.js对AppContext的导入语句上：
你当前的导入写法是：

import AppContext from "./App";

但在App.js中，AppContext是命名导出（语法为export const AppContext = ...），并非默认导出，App.js的默认导出是App组件。你现在导入的AppContext实际是App函数组件本身，不是你创建的Context实例，自然取不到String1、String2属性，也不会触发上下文的取值逻辑。

修复方法 #

把Level2_Child1.js里的导入语句修改为命名导入即可：

import { AppContext } from "./App";

修改后即可正常读取Provider中传递的字符串值，默认值只会在组件没有被对应Context的Provider包裹时才会生效，修复后会优先读取Provider中配置的value值。

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