React，打字稿，钩子.无法调用类型缺乏呼叫签名的表达式

Question

我是React Hooks的新手，并且是Typescript的新手。我一直在尝试利用钩子，特别是useContext钩子来管理全球状态(我很感激这个示例可能是过分的，但是我的目标是能够真正理解它(。我遵循了一些不同的示例，但是没有使用Typescript，现在遇到此错误：

Cannot invoke an expression whose type lacks a call signature. Type 'ContextProps' has no compatible call signatures.

我在这里查看了其他多个问题，这些问题解释了解决方案(有关签名的联合会(，但我只是无法与我的代码有关。

这是我的代码上的简化版本(请原谅，因为我仍在学习:)(，但是我在MainPage.tsx中的handleOpenDrawer函数上遇到了错误：

app.tsx

import React, { createContext, Dispatch, useReducer } from 'react';
import MainPage from './MainPage';
interface ContextProps {
    drawerState: DrawerState;
    drawerDispatch: Dispatch<DrawerActions>;
}
interface DrawerState {
    open: boolean;
}
const initialDrawerPosition:DrawerState = {
    open: false,
};
interface DrawerActions {
    type: 'OPEN_DRAWER' | 'CLOSE_DRAWER';
}
const reducer = (state:DrawerState, action:DrawerActions) => {
    switch (action.type) {
        case 'OPEN_DRAWER':
            return {
                ...state,
                open: true,
            };
        case 'CLOSE_DRAWER':
            return {
                ...state,
                open: false,
            };
        default:
            return state;
    }
};
export const DrawerDispatch = createContext({} as ContextProps);
export default function App() {
    const [ drawerState, drawerDispatch ] = useReducer(reducer, initialDrawerPosition);
    const value = { drawerState, drawerDispatch };
    return (
        <DrawerDispatch.Provider value={value}>
            <MainPage />
        </DrawerDispatch.Provider>
    );
}

mainpage.tsx

import { useContext } from 'react';
import { DrawerDispatch } from './App';
export default function App() {
    const dispatch = useContext(DrawerDispatch);
    const handleOpenDrawer = () => {
        dispatch({ type: 'OPEN_DRAWER' });
    };
    return (
        <button onClick={handleOpenDrawer}>
            Click me
        </button>
    );
}

我希望能够使用调度更新state.open为true，而是获得上面提到的错误。任何帮助将不胜感激！

Answer 1

我弄清楚了，所以以为我最好把它放在这里，以防其他人遇到相同的问题。
useContext(DrawerDispatch)返回一个对象，dispatch是该对象的属性之一，因此const dispatch需要破坏：
const { dispatch } = useContext(DrawerDispatch)会做到。
或更好的可变命名：
const context = useContext(DrawerDispatch)，然后称其为context.dispatch而不是dispatch。