Реагируйте, Машинопись, Крючки.Невозможно вызвать выражение, тип которого не имеет подписи вызова - PullRequest
Новая
       14

Реагируйте, Машинопись, Крючки.Невозможно вызвать выражение, тип которого не имеет подписи вызова

0 голосов
/ 30 июня 2019

Я новичок в реагировании на хуки и довольно плохо знаком с машинописью.Я пытался использовать хуки, в частности хук useContext, для управления глобальным состоянием (я ценю, что в этом примере это может быть излишним, но моя цель - просто понять это на самом деле).Я следовал нескольким различным примерам, но ни один из них не использовал машинописный текст, и теперь я получаю эту ошибку: 

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

Здесь я рассмотрел несколько других вопросов, которые объясняют решение (что-то о объединении подписей).), но я просто не могу разобраться с этим в отношении моего кода.

Это упрощенная версия моего кода (прошу прощения, я все еще учусь :)), но я получаюошибка функции handleOpenDrawer в MainPage.tsx:

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, используя диспетчеризацию, но вместо этого получу ошибку, упомянутую выше.Любая помощь будет высоко ценится!

1 Ответ

0 голосов
/ 03 июля 2019

Я понял это, поэтому подумал, что мне лучше надеть это здесь на тот случай, если у кого-то еще возникнет такая же проблема.
useContext(DrawerDispatch) возвращает объект, а dispatch является одним из свойств этого объекта, поэтому const dispatch требует деструктуризации:
const { dispatch } = useContext(DrawerDispatch) сделает это.
или лучше именование переменных:
const context = useContext(DrawerDispatch) и затем назовите его как context.dispatch вместо dispatch.

...