时间戳

首页 > 解决方案 > 如何使用反应和打字稿修复错误“false类型的参数不可分配给（currentValue：boolean）=> boolean”？

reactjs - 如何使用反应和打字稿修复错误“false类型的参数不可分配给（currentValue：boolean）=> boolean”？

问题描述

我想使用 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
    }
}

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

标签： reactjstypescript

解决方案

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

推荐阅读