JavaScript | 如何解决 Cannot set property of Undefined

1 概述

在未定义的属性上设值，会出现Cannot set property of undefined错误。若要解决此错误，需要检查所设定的值是否匹配属性类型，或者属性是否初始化。

2 从一个例子开始

有如下代码：

const example = undefined;

// 👇️ With OBJECTS
// ⛔️ Cannot set properties of undefined (setting 'myKey')
example.myKey = 'my value';

// 👇️ With ARRAYS
// ⛔️ Cannot set properties of undefined (setting '0')
example[0] = 'my value';

要解决这个问题，需要给变量提供一个备用值。

const fromDb = undefined;

// ✅ Objects
const obj = fromDb || {};
obj.myKey = 'my value';
console.log(obj); // 👉️ {myKey: 'my value'}

// ✅ Arrays
const arr = fromDb || [];
arr[0] = 'my value';
console.log(arr); // 👉️ ['my value']

我们使用逻辑 OR (| |) 操作符来提供一个备用值。

最常见的错误发生在试图对对象或数组的undefined设置嵌套属性。

const obj = {};
// ⛔️ Cannot set properties of undefined (setting 'b')
obj['a']['b'] = 'my value';

const arr = [];
// ⛔️ Cannot set properties of undefined (setting '0')
arr[0][0] = 'my value';

当尝试访问 obj ['a'] 将返回undefined，因为对象中不存在 a 键。类似地，访问索引为0的数组将返回undefined，因为数组在该索引处没有元素。

若要解决此错误，请确保对象或数组中该属性存在。

// ✅ With objects
const obj = {};

if (obj['a']) {
  obj['a']['b'] = 'my value';
} else {
  obj['a'] = {
    b: 'my value',
  };
}

console.log(obj); // 👉️ {a: {b: 'my value'}}