如何使用 react 和 typescript 修复 boolean 或 undefined 类型的错误参数？答案

【问题标题】：How to fix the error argument of type boolean or undefined using react and typescript?如何使用 react 和 typescript 修复 boolean 或 undefined 类型的错误参数？
【发布时间】：2020-08-03 15:32:17
【问题描述】：

我收到了错误

“布尔类型的参数或未定义的参数不能分配给布尔类型的参数。未定义的类型不能分配给布尔类型”

当我将道具从孩子传递到如下的 usehook 时，

下面是我的代码，

function Parent() {
    const [isDialogOpen, setDialogOpen] = React.useState(false);
    return (
        <Wrapper>
            <DialogComponent isDialogOpen={isDialogOpen}                     setDailogOpen={setDialogOpen}/>
         </Wrapper>
    );
}

interface ChildComponentProps {
    isDialogOpen: boolean,
    setIsDialogOpen: any,
}

function ChildComponent ({isDialogOpen, setIsDialogOpen} : ChildComponentProps) {
    const count= 10;
    useSomehook(isDialogOpen, count); //error here
    return (
        <Wrapper>
            <div>somedivs</div>
            {isDialogOpen && <Overlay/>}
        </Wrapper>
    );
}

我在其他文件中定义了 useSomehook，如下所示，

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

我是使用打字稿的新手。我不知道如何解决这个错误。有人可以帮我解决这个问题。谢谢。

【问题讨论】：

useSomehook(enabled: boolean | undefined, count:number) 应该修复它
在isDialogOpen 中得到undefined 的原因是使用React.useState(false) 而不是React.useState<boolean>(false)。尝试显式定义泛型类型。

标签： reactjs typescript

【解决方案1】：

你有一个使用布尔值的 useState。在打字稿中，您必须确保在这种情况下您作为布尔值传递的任何变量都不能是未定义的。

有多种解决方案，但快速解决方法是像这样修复您的组件。

function ChildComponent ({isDialogOpen, setIsDialogOpen} : ChildComponentProps) {
    const count= 10;
    useSomehook(isDialogOpen !== undefined ? isDialogOpen : false, count); //error here
    return (
        <Wrapper>
            <div>somedivs</div>
            {isDialogOpen && <Overlay/>}
        </Wrapper>
    );
}

这确保如果 isDialogOpen 不是未定义的，我们将使用该值，否则我们使用布尔值“false”。当然，您可以根据自己的喜好对其进行编辑。

【讨论】：