Как исправить ошибку аргумент типа string или undefined не присваивается параметру типа string с использованием typescript и react?

#reactjs #typescript

#reactjs #typescript

Вопрос:

я получаю ошибку аргумент типа string или undefined не может быть присвоен параметру типа string с использованием typescript и react

ниже приведен мой код,

     function List({items}: Props) { 
        const [activeindex, setActiveindex] = React.useState<string>();
        return (
            items.map((item: any) => {
                <AddButton setActiveIndex={setActiveIndex} itemId={item.id}/>
            }
        );
    }

    
    interface AddButtonProps {
        setActiveIndex: any;
        itemId?: string;
    }
    function AddButton ({setActiveIndex, itemId}: AddButtonProps){
        const {toggleDrawing} = useDrawing();
        const handleClick = (itemId) => {
            setActiveIndex(itemId);
            toggleDrawing(itemId); //error here
        }
        return (
            <Button onClick={handleClick}/>
        );
    );


    function useDrawing () {
        const [editableItemId, setEditableItemId] = React.useState<string>();
        const toggleDrawing = React.useCallback(async (itemId: string) => {
            if (isDrawing amp;amp; editableItemId === itemId) {
                cancelDrawing();
            } else if (isDrawing) {
                cancelDrawing();
                setEditableItemId(itemId);
            } else {
                setEditableWorkAreaId(itemId);
            }
        },
            [isDrawingPolygon, editableItemId, cancelDrawing]
    );
}
  

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

Ответ №1:

попробуйте этот способ 😉

 const toggleDrawing = React.useCallback(async (itemId: string | undefined) => {
    if (isDrawing amp;amp; editableItemId === itemId) {
        cancelDrawing();
    } else if (isDrawing) {
        cancelDrawing();
        setEditableItemId(itemId);
    } else {
        setEditableWorkAreaId(itemId);
    }
   },[])
  

Комментарии:

1. @Adrian Brand возможно, вам потребуется проверить еще раз, я только что закончил свой ответ

2. Сбой происходит в функции addButton

Ответ №2:

Ваш интерфейс определяет itemId?: string; и строку или undefined, но для вызова функции требуется строка.

Используйте либо

 if (itemId) {
  toggleDrawing(itemId);
}
  

или

toggleDrawing(itemId || '');

или

toggleDrawing(itemId as string);