Почему при переборе пишет, что массива нет, а в console.log все выводит?

Question

[k3499]

При выводе массива в console.log все отображается


но когда пытаюсь перебрать, то вылетает ошибка

export default function Menu({ slug, catList }) {
  console.log(catList)
  catList.map((element) => {
    return (console.log(element));
  })

Answer 1

[Егор Живагин]

Если очень коротко - потому что console.log выводит актуальное состояние объекта (на момент, в котором вы смотрите в консоль), а не состояние на момент вызова console.log.
Видите в консоли рядом с массивом на первой строчке квадратик с буквой i ? Это индикатор того, что выводимый объект мутировал

Если код клиентский, а не серверный, рекомендую в нужном месте поставить debugger; // вместо console.log(catList)

?? Вероятно, catList вам из какого-то запроса приходит? Тогда на момент первого рендера его может не быть
Достаточно поправить так:
Menu({ slug, catList = [] })

Comments

[k3499]

Да, дебаггер показал, что в этот момент catList еще undefined.
А то, что мы предзадали catList почему помогло? Просто чтобы убрать ошибку при первом рендере? Просто map не сработает, потому что нет ничего в массиве. А уже потом как появится данные, то и мап выполняется.
Я все верно понял?

[Lev]

k3499, у undefined нет метода map, потому если не объявить хоть какой-то массив, будет ошибка.
У пустого массива в свою очередь, этот метод есть, и после когда прилетят данные, произойдет ререндер и отобразятся нужные данные уже из полного массива

[k3499]

Lev, Понял. Спасибо большое!