使用 useContext 函数反应自定义挂钩

Question

当我尝试在自定义挂钩中使用函数时发生以下错误：

未捕获类型错误：tglCartao 不是函数

我在 UseCartao.tsx 的自定义挂钩：

export interface ICartaoContext {
    idToggleKey     : string;
    setIdToggleKey? : any;

    arrayCartoes    : Array<any>;
    setArrayCartoes?: any;

    tglCartao?:(numeroCartao: string) => void;
};

const defaultValue = {
    idToggleKey     : '1',
    arrayCartoes    : [
        {
            NR_CARTAO: 1,
            INVALIDO: false,
            SELECIONADOS: [] 
        },
    ]
};

const CartaoContext = createContext<ICartaoContext>(defaultValue);

export const CartaoProvider: FC<any> = ({ children } : any) => {
    const Cartao = UseCartaoProvider();
    return <CartaoContext.Provider value={{...Cartao}}>{children}</CartaoContext.Provider>;
};

export const useCartao = () => {
    return useContext(CartaoContext);
};

const UseCartaoProvider = () => {
    const [idToggleKey, setIdToggleKey] = useState<string>('1');
    const [arrayCartoes, setArrayCartoes] = useState<Array<any>>(
        [
            {
                NR_CARTAO: 1,
                INVALIDO: false,
                SELECIONADOS: [] 
            },
        ]
    ); 

    const tglCartao = useCallback((numeroCartao: string) : void => {
        setIdToggleKey(numeroCartao);
    }, [setIdToggleKey]);

    return ({
        idToggleKey,
        arrayCartoes,
        tglCartao: tglCartao,
    })
}

export default useCartao;

我的按钮在 index.tsx 调用函数 tglCartao:

onClick={() => tglCartao!(idToggleKey === item.NR_CARTAO ? '0' : item.NR_CARTAO)}

是的，我所有的 index.tsx return 代码都在 <CartaoProvider> </CartaoProvider>

Answer 1

也许 CartaoProvider 和你的按钮在同一级别使用，确保你不要像下面那样调用它

EX

const tglCartao = useHookFromContext() //your context from CartaoProvider

<CartaoProvider> 

</CartaoProvider>

因为您甚至可以在将上下文包装到 Provider 之前调用上下文

正确的方法 EX

<CartaoProvider> 
    <Child/>
</CartaoProvider>


const Child = () => {
     const tglCartao = useHookFromContext() //your context from CartaoProvider
     ....
}

使用 useContext 函数反应自定义挂钩

React custom hook with useContext functions

typescript

reactjs

react-hooks

use-context