Как сделать проверку на пустое значение?

Question

[Deedare]

Подскажите, делаю отрисовку по условию. почему получается ошибка и как ее исправить?

{data[index].img && <div><img src={HOST + data[index].img}/></div>}

При загрузке с сервера приходит картинка и отрисовывается в div. Но когда картинки нет, появляется ошибка

Cannot read properties of undefined (reading '0')
TypeError: Cannot read properties of undefined (reading '0')

Answer 1

[Павел]

if (data && data.length)
В реакте, наверное, как-то, типа, так

(data && data.length && data[index]?.img) && <div><img src={HOST + data[index].img}/></div>

Comments

[chemdev]

Добавлю, что следует отдельно предусмотреть состояние когда картинка загружается и когда она загрузилась но неудачно.

[Deedare]

Спасибо, сработало!

[WbICHA]

А что мешало опшинал чейнинг использовать вместо всего этого ужаса?

[Константин]

Делать проверку на data.length не совсем правильно, можно получить в DOM "0" (потому что пустой массив не равен false)
Правильнее будет делать проверку либо data.length > 0, либо приводить к булиновскому значению !!data.length

Когда я первый раз с этим столкнулся, долго не мог понять откуда у меня на странице взялся нолик

[webe]

Я бы еще не мусорил в верстке, расчитывать все переменные выше и их уже пихать в верстку

const image = ... тут все проверки

image && <div><img src={image}/></div>

[Константин]

webe, тут можно до бесконечности, можно в проверку и саму картинку перенести, а вставлять {image}
Либо вообще сделать отдельную компоненту и туда перенести картинку и логику показа для нее.
Как я прочитал в одной книжке "В рефакторинге, самое главное вовремя остановиться" ))