TypeScript выдает ошибку «Объект, возможно, не определен» после импорта объекта в компоненте React

#reactjs #typescript

Вопрос:

Я новичок в машинописи, и я получаю ошибки «Объект, возможно, не определен» после импорта объекта и попытки перебора массивов внутри объекта.

Я попытался использовать оператор ненулевого утверждения безрезультатно.

Вот кодовая песочница. Я не особенно доволен решением для условного рендеринга, найденным в приложении с ComponentWithProps. Это лучший способ сделать это?

Любая обратная связь была бы замечательной! Спасибо!

Ответ №1:

Объект , который может быть неопределенным, не calendar является, но он является результатом вызова функции find, которая либо является типом элемента массива, либо не определена, как можно увидеть в объявлениях typescript 4.3.5:

 find<T>(value: T, ...): T | undefined;
 

вам нужно подтвердить, что оно не определено, прежде чем обращаться к name свойству:

 let time = calendar.hours.find((thisHour) => thisHour.number === 2);

if (time !== undefined) {
    time = time.name;
}
 

или, более элегантное решение, с использованием || (логической ИЛИ) оценки короткого замыкания, предоставляемой с резервным значением по умолчанию:

 let time = calendar.hours.find((thisHour) => thisHour.number === 2)?.name || 'fallbackName';
 

если ваш запасной undefined вариант (как и мое первое решение), вы можете просто использовать ? необязательный синтаксис цепочки без остальной части строки:

 let time = calendar.hours.find((thisHour) => thisHour.number === 2)?.name;