【问题标题】：How to fix error "argument of type false is not assignable to (currentValue: boolean) => boolean" using react and typescript?如何使用反应和打字稿修复错误“false类型的参数不可分配给（currentValue：boolean）=> boolean”？
【发布时间】：2020-12-28 13:05:39
【问题描述】：

我想使用 react 和 typescript 修复错误“false 类型的参数不可分配给 (currentValue: boolean) => boolean。

我有一个方法 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
    }
}

我不确定如何解决这个问题。有人可以帮我解决这个问题。谢谢。

【问题讨论】：

我已经编辑了我的问题。之前我的代码中有一个错字。是的，这行得通。但是当我在其他组件（AnotherComponent）中使用相同的toggleDialogVisibility时它会出错
那么stackoverflow.com/questions/63822492 发生了什么？
请将我的代码与此问题中的代码进行比较。这里的问题stackoverflow.com/questions/63822492 只提到了从父组件调用toggleDialogVisibility。它适用于那里提供的解决方案。但现在我有另一个组件，我在其中调用 toggleDialogVisibility(false) 就像现在抛出错误一样。

标签： reactjs typescript

【解决方案1】：

我认为你不需要 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>
}

【讨论】：

【解决方案2】：

在这段代码中：

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

您认为您正在返回一个带有函数的对象，但事实并非如此。

修复

返回一个函数，例如

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

【讨论】：

我已经编辑了我的问题。我的代码中有一个错字。我现在修好了。你能看一下吗？我认为问题出在我传入的toggleDialogVisibility定义中的类型。但不知道如何解决。