TypeError: Cannot read property ‘xxx’ of undefined — Перевод и решение
При отладке своего кода (обычно на JavaScript) программист может столкнуться с системным сообщением об ошибке « TypeError: Cannot read property ‘xxx’ of undefined ». Вместо значения ХХХ указана какая-либо объявленная переменная или свойство объекта, значение которых по различным причинам не задано разработчиком. Ниже разберём, каков перевод данного сообщения, и каково может быть решение возникшей проблемы.
Почему возникает ошибка
В переводе данное сообщение выглядит как «Ошибка типа: Не удаётся прочитать неопределённое свойство ХХХ». Поскольку в некоторых языках программирования (в частности, «JavaScript») есть возможность получения доступа к неинициализированным значениям, то это может вызывать появление рассматриваемой мной ошибки.
Что до причин ошибки undefined, то она обычно возникает при отладке какого-либо программного кода, и может быть вызвана следующими факторами:
- Использующиеся в программном коде переменная не была инициализирована (переменной не присвоено значение);
- Была осуществлена попытка доступа к отсутствующему свойству объекта;
- Была попытка получить доступ к отсутствующему элементу массива.
Давайте разберёмся, как исправить данную ошибку при написании вашего кода.
Присвойте начальное значение переменной
Наиболее очевидным способом исправить ошибку «TypeError: Cannot read property ‘xxx’ of undefined» является присвоение переменной начального значения. Чем меньше такая переменная пребывает в неинициализированном состоянии – тем будет лучше. В идеале лучше сразу же присвоить значение «Variable» = «начальное значение» (‘initial’), хотя далеко не всегда специфика вашего кода может предполагать указанный вариант.
Улучшите связность вашего кода
Термин «связность» в нашем контексте характеризует уровень взаимосвязанности элементов разрабатываемого вами модуля (пространства имён, метода, класса, блока кода). Как известно, существуют два типа связности, а именно сильная и слабая связность. Использование сильной связности предполагает фокусировку элементов модуля лишь на одной задаче. Потому для извлечения выгоды из сильной связности, необходимо держать используемые переменные поближе к блоку кода, в работе которого они используются.
К примеру, вместо блока кода:
будет оптимальнее переместить переменные поближе к месту их применения:
Улучшение связности позволит избежать появление ошибки «Cannot read property ‘xxx’ of undefined» при отладке вашего кода.
Проверьте наличие свойства
В языке Javascript имеются ряд инструментов, позволяющих определить, имеет ли необходимый нам объект какое-либо свойство:
- typeof obj.prop !== ‘undefined’ — данный инструмент позволяет проверить тип значения свойства;
- obj.prop !== undefined — этот инструмент позволяет сравнить объект непосредственно с undefined;
- ‘prop’ in obj позволяет проверить объект на наличие его собственного или полученного свойства;
- И obj.hasOwnProperty(‘prop’) позволяет проверить объект на наличие его собственного свойства.
В этом и схожих случаях рекомендуется использовать оператор in, который обладает простым и удобным синтаксисом. Наличие оператора in демонстрирует желание проверить, имеет ли объект нужное свойство без обращения к фактическому значению данного свойства.
Деструктурируйте доступ к свойствам нужного объекта
Деструктурирование нужного объекта позволяет непосредственно извлекать значения свойства объекта в переменные или, если такое свойство не существует, устанавливать значение по дефаулту. Такой вариант позволяет исключить прямой контакт с undefined.
Извлечение свойств теперь выглядит примерно так:
Деструктурирование хорошо, когда можно указать значение по умолчанию, и это значение будет возвращено при попытке доступа к отсутствующему свойству. В конечном счёте, благодаря деструктурированию вы сможете избежать появления undefined и всех сопутствующих проблем.
Заключение
В нашей статье мы разобрали, почему появляется ошибка «TypeError: Cannot read property ‘xxx’ of undefined», как она переводится и как от неё можно избавиться. Во избежание возникновения данной ошибки присвойте начальное значение соответствующей переменной. Это позволит избежать появления рассмотренной выше дисфункции при отладке вашего кода.
Как победить ошибку «cannot read property of undefined»?
Handle polling update error: TypeError: Cannot read property ‘user_id’ of undefined
как бы да, но всеравно ХЗ что за модуль он использует для доступа к vk api. Возможно, что используемый модуль вполне умеет и user_id обрабатывать. Проблема в том, что модуль не указан, посмотреть его доку не представляется возможным. Я например не пишу ботов под вк, и не в курсе, сколько там различных либ, для доступа к API понаписали, а лезть и целенаправленно разбираться с этим вопросом мне лень)
Но все равно там вроде бы деструктуризация неправильная, для любой версии апи
почему не правильная? разве так нельзя?)))
ХЗ что за модуль он использует для доступа к vk api
Kovalsky, не поленился, глянул последнюю версию API. Действительно, метод вернет массив объектов со следующими полями:
id integer идентификатор пользователя.
first_name string имя.
last_name string фамилия.
deactivated string поле возвращается, если страница пользователя удалена или заблокирована, содержит значение deleted или banned. В этом случае опциональные поля не возвращаются.
is_closed boolean скрыт ли профиль пользователя настройками приватности.
can_access_closed boolean может ли текущий пользователь видеть профиль при is_closed = 1 (например, он есть в друзьях).
и никаких user_id в нем нет. Но все же вернет именно массив, а значит если пользователь существует, то user_info не будет undefined. То есть текущая ошибка с де структуризацией не связанна (если конечно вы не имеете ввиду то что метод вместо массива может вернуть код ошибки а у автора их обработка никак не предусмотрена), как не связанна и с тем что user_id в объекте не существует (эту ошибку он получит уже после того как решит проблему с текущей:)))
Cannot read property ‘removeClass’ of undefined
I am trying to make an automatic slideshow but this message keeps popping up and I don’t understand why.
The ‘show’ and ‘hide’ classes set the display to ‘block’ and ‘none’ respectively.
Any advice or correction is much appreciated.
4 Answers 4
Pretty close, just a couple things.
You’re iterating over all the slides, updating all of them
This is looping over all the slides, each iteration sets the next slide to visible, so when the loop finishes you’re right back where you started.
You’re adding a new timer each time you call the function
Every time you call this function, you add another timer that calls it again. You only need to use setInterval() once.
CSS updates Having a class set to display: none; requires you to remove that class every time you update the slides. A better approach would be to have display: none; be the default property for the images in the slideshow. Then you only need to add the show class and not worry about removing the hide class.
Updated Code:
JavaScript
HTML
First you should call your autoSlideshow() after you define mySlides. Then re-initialize value of next when it gets out of bound. Best way to call autoSlideshow will be to take it out of the method:
Using the HTML you provided, you can assume that the slides variable has 3 elements in it. Now, when iterating over mySlides, you assign the index to a variable and use that value + 1 to access an element of the slides array. What happens if you are currently on the 3rd item of the mySlides array? The index would be two and next would be set to 3. Since slides has only 3 values and thus can only reach slides[2], the code is trying to access a currently undefined index of slides.
You get the error because you get an out of bound index. As your array contains 3 elements and the index start at 0, array[3] will be out of bounds.
Apart from that, $(‘#slideshow .slide’) already gives you an array of elements, so no need to define an extra array for it. Furthermore, don’t use the setInterval inside your function as this will eventually get your script to crash as it gets called over and over again without clearing it. Inside your slideshow function, don’t call the each as this will do the update on every slide in one go. What you want to do is when your function gets called, hide all slides and show only the current index.
When your index reaches the end of the array, you reset it to 0 to start over.
The .hide class seems redundant, just add a display: none to your .slide .