Reactjs 不允许对Typescript使用React createContext（null）？

我正在尝试使用useReducer和useContext挂钩设置React存储。React.createContext（defaultValue）正在使用我的TS检查器创建问题。我尝试了一些不同的方法，但本质上，我

createContext（null）

然后在组件

useReducer（）

中设置state和dispatch，但是当我调用提供程序并将值作为{state，dispatch}传递时，它不会告诉我“Type'{state:any；dispatch:React.dispatch；}”不可分配给类型“null”

我不理解这一点，因为当它出错时，我已经分配了state和dispatch，并且该值不应该再为null

下面是我试图创建的上下文提供程序包装

import React, { createContext, useReducer, FC, Dispatch } from 'react';
import storeReducer, { initialState } from './reducer';
import { Action, State } from './types';
import { isNull } from 'util';

const StoreContext = createContext(null);

const StoreProvider:FC = ({ children }) => {
  const [state, dispatch] = useReducer(storeReducer, initialState);
  const value = {state, dispatch}
  return (
    <StoreContext.Provider value={value}>
      {children}
    </StoreContext.Provider>
  );
};

export { StoreProvider, StoreContext };

export interface IStoreContext {
  dispatch: (action: Action<any>) => {};
  state: State;
}

import React，{createContext，useReducer，FC，Dispatch}来自'React'；
从“/reducer”导入storeReducer，{initialState}；
从“./types”导入{Action，State}；
从“util”导入{isNull}；
const StoreContext=createContext（null）；
const StoreProvider:FC=（{children}）=>{
const[state，dispatch]=useReducer（storeReducer，initialState）；
常量值={state，dispatch}
返回(
{儿童}
);
};
导出{StoreProvider，StoreContext}；
导出接口IStoreContext{
调度：（action:action）=>{}；
国家：国家；
}

如果我将其保留为简单的

const StoreContext=createContext（）；

，那么它会抱怨没有定义defaultValue

---

疯狂的是，我从一个旧项目中提取了它，并且在编译时没有任何问题。

当您使用

null

初始化上下文时，无法推断预期的类型。在这种情况下，您必须显式地给出上下文的类型

这里看起来像：

const StoreContext = createContext<{
  state: MyStateType,
  dispatch: Dispact,
} | null>(null);

const StoreContext=createContext（null）；

因为我刚刚做了一个帐户来回答这个问题，所以我不能在上面发表评论。 Alex Wayne是正确的，这对于Typescript是可以接受的。但是，

useContext

钩子实际上不适用于此，因为就Typescript而言，您可能在该上下文中有一个

null

值

根据最初的答案…这里是我们在Typescript中的上下文

const StoreContext=createContext（null）；

因此，我们需要创建一个新的钩子，我们将其称为

useContextAndErrorIfNull

const useContextAndErrorIfNull = <ItemType>(context: Context<ItemType | null>): ItemType => {
  const contextValue = useContext(context);
  if (contextValue === null) {
    throw Error("Context has not been Provided!");
  }
  return contextValue;
}

const useContextAndErrorIfNull=（上下文：context）：ItemType=>{
const contextValue=useContext（上下文）；
if（contextValue==null）{
抛出错误（“未提供上下文！”）；
}
返回contextValue；
}

---

使用此钩子而不是

useContext

，它应该都能正常工作。

在这种情况下，可以临时使用它来避免麻烦：

interface Store {
  state: MyStateType,
  dispatch: Dispact,
}

const StoreContext = createContext<Store>({} as Store);

const StoreProvider = ({children}) => {
  const {state, dispatch} = theseAreAlwaysPresent()

  return (
    <StoreContext value={{state, dispatch}}>
      {children}
    </StoreContext.Provider>
  )
}
... 

接口存储{
状态：MyStateType，
调度：Dispact，
}
const StoreContext=createContext（{}作为存储）；
const StoreProvider=（{children}）=>{
const{state，dispatch}=theseAreAlwaysPresent（）
返回(
{儿童}
)
}
... 

我已经尝试过了。当我声明类型时，我让它工作了，但在使用者（我调用useContext）中，我得到了以下错误：

类型为“Context”的参数不能分配给类型为“Context”的参数。

我为“MyContextType”创建了一个如下所示的接口：

导出接口MyContextType{state:state；dispatch:dispatch；}

。这是使用者中的上下文回调：

const ctx=useContext（StoreContext）

初始化时，它不喜欢将

null

作为值，但它也不允许我声明

。