javascript - 如何修改代码以便可以使用 react 和 typescript 调用 usehook？

当点击添加按钮且计数大于或小于0时，会显示一个弹出窗口。

下面是代码，

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]);
}

这可以工作，但只有当 enabled 为 true 时才会调用触发方法。

我想修改上面的代码，这样当用户点击添加按钮时，我希望这个 useTrigger 发生。我不想检查是否启用并调用 trigger。

我已经尝试了以下取消勾选启用的操作。

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

这个可以工作，但当计数小于或等于0时会显示弹出窗口。但我希望它首先检查是否点击了添加按钮。

就在用户在 on_add_click 中点击添加按钮后，我希望弹出窗口显示。我该如何修改上面的代码？我刚开始使用 hooks。有人能帮我吗？谢谢。

编辑：加粗文本 我尝试做如下操作，但出现错误

未捕获的不变性违规：无效的 Hook 调用。Hook 只能在函数组件体内部调用。

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

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

我该如何修复这个。

答案＃1

如果我理解正确的话，你只需要在你的 hook 中添加一个状态，并返回 setter，以便在 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
}

然后在你的带有按钮的组件中，你可以这样做：

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