1

我有：

export interface AppStateType {
    isOnline: boolean
}

const AppContext = createContext([{}, () => { }]);

const AppProvider = (props) => {
    const [appState, setAppState] = useState<AppStateType>({
        isOnline: true
    })

    return <AppContext.Provider value={[appState, setAppState]}>
        {props.children}
    </AppContext.Provider>
}
export { AppContext, AppProvider }

当我尝试使用它时：

const [appState, setAppState] = useContext<AppStateType>(AppContext)

我收到打字稿错误：

Argument of type 'Context<{}[]>' is not assignable to parameter of type 'Context<AppStateType>'.
  The types of 'Provider.propTypes.value' are incompatible between these types.
    Type 'Validator<{}[]>' is not assignable to type 'Validator<AppStateType>'.
      Type '{}[]' is not assignable to type 'AppStateType'.
4

2 回答 2

1

您收到此错误的原因是因为 Context 的返回类型不是AppStateType一个数组，而是一个包含两个值的数组。第一个是 AppState，第二个是调度程序

使用打字稿，您可以在创建上下文时键入上下文

const AppContext = createContext<[AppStateType, React.Dispatch<any>]>(null);

发布这个，你可以像这样简单地使用它

const [appState, setAppState] = useContext(AppContext);

示例演示

注意：将 createContext 的默认值定义为 null，因为它仅在层次结构树中没有提供者时使用。在这种情况下，它主要可能是一个错误

于 2020-05-13T13:41:11.537 回答
0

createContext 的参数是上下文的默认值，请参见此处 因此，如果您的上下文类型是状态并像这样设置状态

[AppStateType,React.Dispatch<React.SetStateAction<AppStateType>>]

你需要给一个默认值

const AppContext = createContext([{}, () => { }]);

应该

const AppContext = createContext<[AppStateType,React.Dispatch<React.SetStateAction<AppStateType>>]>([{isOnline:false},()=> false]);
于 2020-05-13T13:50:44.287 回答