javascript - Hur man modifierar koden så att man kan använda usehook med React och TypeScript?

Ett popup-fönster visas när lägg till-knappen klickas på och räkningen är större eller mindre än 0.

nedan är koden,

function AddButton () {
    const [isOpen, setIsOpen] = React.useState(false);
    const count = useGetCount();
    useTrigger(isOpen, count);
    const on_add_click = ()  => {
        setIsOpen(true);
    }

    return (
        <button onClick={on_add_click}>add</button>
    );  
}


interface ContextProps {
    trigger: (count: number) => void;
}

const popupContext = React.createContext<ContextProps>({
    trigger: (count: number) => {},
});

const usePopupContext = () => React.useContext(popupContext);

export const popupContextProvider = ({ children }: any) => {
    const [show, setShow] = React.useState(false);
    const limit = 0;

    const dismiss = () => {
        if (show) {
            sessionStorage.setItem(somePopupId, 'dismissed');
            setShow(false);
        }

    };

    const isDismissed = (dialogId: string) =>
        sessionStorage.getItem(dialogId) === 'dismissed';

        const context = {
            trigger: (count: number) => {
            if (!isDismissed(somePopupId) && count <= limit) {
                setShow(true);
            } else if (count > limit) {
                setShow(false);
            }
        },
    };

    return (
        <popupContext.Provider value={context}>
            {children}
            {show && (
                <Popup onHide={dismiss} />
            )}
        </popupContext.Provider>
    );
};


export function useTrigger(enabled: boolean, count: number) {
    const { trigger } = usePopupContext();
    React.useEffect(() => {
        if (enabled) {
            trigger(count);
        }
    }, [enabled, count, trigger]);
}

Detta fungerar men anropar trigger-metoden endast när enabled är true.

Jag vill ändra koden ovan så att när användaren klickar på lägg till-knappen, vill jag att detta useTrigger ska hända. Jag vill inte kontrollera om det är aktiverat och kalla på trigger.

Jag har försökt följande borttagna kontrollera om aktiverad.

export function useTrigger(enabled: boolean, count: number) {
    const { trigger } = usePopupContext();
    React.useEffect(() => {
        trigger(count);
    }, [enabled, count, trigger]);
}

Detta fungerar men popup-fönstret visas när antalet är mindre än eller lika med 0. Men jag vill att det först ska kontrollera om lägg till-knappen har klickats eller inte.

Så snart användaren klickar på knappen lägg till i on_add_click vill jag att popup-fönstret ska visas. Hur kan jag ändra koden ovan? Jag är ny på att använda hooks. Kan någon hjälpa mig med detta? Tack.

REDIGERA:fet text Jag har försökt göra något som nedan och jag får ett fel

Okontrollerat invariantbrott: Ogiltigt hook-anrop. Hooks kan bara kallas inom kroppen av en funktionskomponent.

on_add_click = () => {
    Trigger(count);
}

export function Trigger(count: number) {
    const { trigger } = usePopupContext();
    React.useEffect(() => {
        trigger(count);
    }, [count, trigger]);
}

hur kan jag fixa detta.

Svar #1

Om jag förstod dig rätt, behöver du bara lägga till ett state till din hook och returnera settern för att anropa den onclick:

export function useTrigger(count: number) {
    const [clicked, setClicked] = React.useState(false)
    const { trigger } = usePopupContext();
    React.useEffect(() => {
        if(clicked) {
            trigger(count);
        }
 
    }, [count, trigger, clicked]);
    const clickCb = useCallback(() => {setClicked(true)}, [])
    return cb
}

Sedan i din komponent med knappen gör du något som detta:

const Component = (props) => {
    const onClick = useTrigger(props.count)
    /* ... */
    return <button onClick={onClick}/>
}