Как исправить аргумент ошибки типа boolean или undefined с помощью react и typescript?

Question

я получаю сообщение об ошибке

"аргумент типа boolean или undefined не может быть назначен параметру типа boolean. Тип undefined не может быть назначен типу boolean"

, когда я передаю опору из дочерний элемент для 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]);
}

Я новичок в используя машинописный текст. я не знаю, как исправить эту ошибку. может кто-нибудь помочь мне с этим. спасибо.

Answer 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». Вы, конечно, можете отредактировать это по своему вкусу.