0

Периодически, при разработке на JavaScript возникает ошибка: Cannot read property *** of undefined или Cannot read property *** of null

Например в этом коде:

const count = result.data.length;

Cannot read property of undefined (reading 'length')

Или в этом:

const dataMap = response.lines.map(item => item * 2);

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Как понять причину ошибки, что оно означает, почему появляются и как ее исправить?

1

1 ответ 1

2

Cannot read property of undefined/null (reading 'method')

Ошибка нам говорит, что мы пытаемся вызвать свойство или метод method объекта, в то время, как сам объект являет null или undefined

Рассматривать будем на примере данного объекта

const data = {
    name: 'TypeError',
    message: '',
    errors: null,
    sayHi: function() {
        console.log(this.name)
    }
}

Ошибка возникнет, если мы попытаемся выполнить следующий код:

data.errors.forEach(item => console.log(item)); // null.forEach()

Uncaught TypeError: Cannot read properties of null (reading 'forEach')

data.values.map(item => console.log(item)); // undefined.map()

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Данные ошибки говорят нам о том, что мы пытаемся вызвать методы у ничего(null или undefined).
data.errors это null. У null нет методов. А data.values вообще не существует. Нельзя вызвать метод у того, что не существует.

Так же, если объявить переменную и попытаться вызвать у нее какой либо метод без инициализации, то получим ошибку(в данном случае Cannot read properties of undefined (reading 'push')):

const arr;
arr.push(1); // undefined.push();

Cannot read property

of undefined - ключ не определен, т.е. отсутствует в объекте.
of null - ключ в объекте есть, но имеет значение null. У null нет методов.

Как понять, где возникла ошибка?

В Node.JS:

file:///C:/dev/nodeserver/SO/11.js:10 // Номер строки
data.errors.forEach(item => console.log(item)); // null.forEach()
            ^
TypeError: Cannot read properties of null (reading 'forEach')
    at ←[90mfile:///C:/dev/nodeserver/SO/←[39m11.js:10:13
←[90m    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)←[39m
    at async Promise.all (index 0)
←[90m    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)←[39m
←[90m    at async loadESM (node:internal/process/esm_loader:91:5)←[39m
←[90m    at async handleMainPromise (node:internal/modules/run_main:65:12)←[39m

Здесь at ←[90mfile:///C:/dev/nodeserver/SO/←[39m11.js:10:13 мы видим номер строки с ошибкой и позицию, где произошла ошибка.

В браузере это выглядит так:

Uncaught TypeError: Cannot read properties of null (reading 'forEach')
    at 123.html?_ijt=vkfkm1ubo3ut5c02m72ihg4lgu:72:15

где 72 это номер строки, а 15 это точка, где возникла ошибка.

Как этого избежать?

Проверять, что приходит в объекте и существуют ли в объекте нужные нам значения. Один из вариантов проверки, воспользоваться console.log().
Можно начать с последнего ключа, однако лучше весь пусть вывести, что бы понимать структуру, с которой работаем:

console.log(data) // { name: 'TypeError', message: '', errors: null, sayHi: [Function] }
console.log(data.errors) // null

Так же можно воспользоваться оператором необязательной цепочки вызовов '?.'

const a = data?.errors?.forEach(item => console.log(item)); // null.forEach()
const b = data?.values?.map(item => console.log(item)); // undefined.map()

Оператор необязательной цепочки вызовов будет проверять значение слева. Если значение null или undefined, цепочка прерывается и возвращается значение undefined.

Для объявленных переменных указывать тип данных

const arr = []; // Указываем, что меременная это массив
arr.push(1); // Можем воспользоваться любым методом массива;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.