如何使用 react 和 typescript 修復錯誤“false 類型的參數不可分配給 (currentValue: boolean) => boolean”？

Question

我想修復錯誤“false 類型的參數不可分配給 (currentValue: boolean) => boolean 使用 react 和 typescript。

我有一個方法 toggleDialogVisibility 定義如下

export const useDialog() {
    const {setDialogVisibility} = React.useContext(DialogContext);
    return ({
        const toggleDialogVisibility = (toggleValue: (currentValue: boolean) => boolean) => { //this is causing the error
            setDialogVisible(toggleValue);
        };
    } );
};

我在下面的兩個組件中調用它，

function Parent() {
    const {toggleDialogVisibility} = useDialog();
    return (
        <div onClick={() => toggleDialogVisibility(open => !open)} />
    );
}

function AnotherComponent() {
    const {toggleDialogVisibility} = useDialog();
    const handle = () => {
        toggleDialogVisibility(false);  //error here
    }
}

我不知道如何解決這個問題。 有人可以幫我解決這個問題嗎？ 謝謝。

Answer 1

在這段代碼中：

return (
        const toggleDialogVisibility = (toggleValue: boolean) => {
            setDialogVisible(toggleValue);
        };
    );

您認為您正在返回一個帶有函數的對象，但事實並非如此。

使固定

返回一個函數，例如

return ({ 
    toggleDialogVisibility: (toggleValue: boolean) => {
        setDialogVisible(toggleValue);
    };
});

Answer 2

我認為你不需要 useDialog

function Parent() {
    const {setDialogVisibility} = React.useContext(DialogContext);
    return (
        <div onClick={() => setDialogVisibility(open => !open)} /> //getting error here
    );
}
function AnotherComponent() {
    const {setDialogVisibility} = React.useContext(DialogContext);
    const handle = () => {
        setDialogVisibility(false);  //error here
    }
}

如果真的想要，我更喜歡

export const useDialog() {
    const {setDialogVisibility} = React.useContext(DialogContext);
    return React.useCallback(()=> {
      setDialogVisibility(x=> !x)
    }, [setDialogVisibility])
};

function Parent() {
    const toggle = useDialog();
    return (
        <div onClick={toggle} /> //getting error here
    );
}
function AnotherComponent() {
    const toggle = useDialog();
    return <div onClick={toggle}>Close</div>
}