React TypeScript解构createContext后useContext应传入什么参数？

问题根因 #

useContext 入参要求是 React.createContext() 调用生成的完整Context实例对象，你当前的写法直接解构了返回值里的Provider和Consumer，没有留存原始的Context实例，自然没有可以传给useContext的合法参数。你之前尝试传入包含Consumer和Provider的自定义对象，只是一个普通JS对象，不是createContext生成的实例，所以无法正常读取Context值。

解决方法 #

只需要调整Context创建的写法，先保存完整的Context实例，再从中解构你需要的Provider和Consumer即可，原有Provider提供值的逻辑完全不需要修改：

// 第一步：先留存完整的Context实例
const CarContext = React.createContext<Context>({
  carNames: [],
});
// 第二步：再解构Provider和Consumer，和你之前的使用习惯兼容
const { Provider, Consumer } = CarContext;

后续在组件内消费Context时，直接把完整的Context实例传给useContext即可：

import { useContext } from 'react';

// 组件内部
const { carNames } = useContext(CarContext);

你原来写的Provider包裹子组件的代码不需要做任何调整，仍然可以正常工作。

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