时间戳

首页 > 解决方案 > 如何使用 react 和 typescript 修复 boolean 或 undefined 类型的错误参数？

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

问题描述

我收到错误

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

当我将道具从孩子传递到下面的使用挂钩时，

下面是我的代码，

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

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

标签： reactjstypescript

解决方案

您有一个使用布尔值的 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”。当然，您可以根据自己的喜好对其进行编辑。

推荐阅读