React.useContext获取失败

Question

遇到一个奇怪的问题，我手动用Consumer接能获取到，但是用useContext()获取到的却是初始化的空函数 loadData: () => {}，有什么原因会造成这种情况吗？我只截取了部分结构代码。

BasicLayout.tsx

// BasicLayout.tsx
export const BasicLayoutContext = React.createContext({
  num: 0,
  loadData: () => {},
});
const App = ({ children }) => {
  const [num, setNum] = useState(0);
  function loadData() {
    axios().then(setNum(res.num));
  }
  useEffect(() => {
    loadData();
  }, []);
  return (
    <BasicLayoutContext.Provider value={{ num, loadData }}>
      {children}
    </BasicLayoutContext.Provider>
  )
}
export default App;

Detail.tsx(获取不到)

// Detail.tsx
import { BasicLayoutContext } from '@/BasicLayout';

const App = () => {
  const { loadData } = useContext(BasicLayoutContext);
  function onLoadClick() {
    loadData();
  }
  return (
    <BasicLayout>
      <Button onClick={onLoadClick}>
        加载
      </Button>
    </BasicLayout>
  );
}

Detail.tsx(可以获取到)

// Detail.tsx
import { BasicLayoutContext } from '@/BasicLayout';

const App = () => {
  function onLoadClick(ctx) {
    ctx.loadData();
  }
  return (
    <BasicLayout>
      <BasicLayoutContext.Consumer>
        {ctx => (
          <Button onClick={onLoadClick.bind(null, ctx)}>
            加载
          </Button>
        )}
      </BasicLayoutContext.Consumer>
    </BasicLayout>
  );
}

Answer 1

// Detail.tsx
import { BasicLayoutContext } from '@/BasicLayout';

const App = () => {
  const { loadData } = useContext(BasicLayoutContext);
  function onLoadClick() {
    loadData();
  }
  return (
    <BasicLayout>                      // ❌只有在它的下级组件才可以获取到，现在你是在BasicLayout之外应用。把BasicLayout提到上级
      <Button onClick={onLoadClick}>
        加载
      </Button>
    </BasicLayout>
  );
}