javascript - 如何理解错误 "TypeError: Cannot read property ' id' of undefined”？

Question

我试图理解这里的基本概念。我知道这是一个常见问题，并且很确定有一个我似乎不明白的简单解释。在这里，我尝试访问对象的不同属性，但我无法这样做。

下面是我使用 console.log(val); 的数组输出

当我尝试这个console.log(val[0]);时输出是:

只是获取该数组中的第一个对象。

现在如果我尝试 console.log(val[0].id);我得到:

还使用 console.log(Object.keys(val)); 检查 key 并使用 console.log(JSON.stringify(val[0])); 进行字符串化

但是如果我在 Chrome 控制台中尝试完全相同的过程，我会得到我需要的内容

这是一个 React 应用程序。我也在 VS Code 和 PyCharm 编辑器中尝试过此操作。我确信我错过了一些简单的事情。

更新

我已添加我的数据和解决问题所采取的步骤。

"variants": [
  {
    "id": 6989569458233,
    "price": "68.00",
    "option1": "color-1",
    "option2": "32",
    "inventory_quantity": 764
  },
  {
    "id": 6989569491001,
    "price": "68.00",
    "option1": "color-1",
    "option2": "32F",
    "inventory_quantity": 158
  },
  {
    "id": 4615727513637,
    "price": "68.00",
    "option1": "color-1",
    "option2": "34D",
    "inventory_quantity": 5
  },
  {
    "id": 4615727906853,
    "price": "68.00",
    "option1": "color-1",
    "option2": "38E",
    "inventory_quantity": 6
  },
  {
    "id": 6989722583097,
    "option1": "color-2",
    "option2": "32E",
    "price": "68.00",
    "inventory_quantity": 1109
  },
  {
    "id": 6989722615865,
    "option1": "color-2",
    "option2": "32F",
    "price": "68.00",
    "inventory_quantity": 1109
  },
  {
    "id": 4615861469221,
    "price": "68.00",
    "option1": "color-2",
    "option2": "34D",
    "inventory_quantity": 1797
  },
  {
    "id": 6989722648633,
    "price": "68.00",
    "option1": "color-2",
    "option2": "34E",
    "inventory_quantity": 0
  },
  {
    "id": 6989722648633,
    "price": "68.00",
    "option1": "color-2",
    "option2": "34F",
    "inventory_quantity": 100
  },
  {
    "id": 6989459193913,
    "price": "68.00",
    "option1": "color-3",
    "option2": "32E",
    "inventory_quantity": 300
  },
  {
    "id": 6989459226681,
    "price": "68.00",
    "option1": "color-3",
    "option2": "32F",
    "inventory_quantity": 320
  },
  {
    "id": 6989459292217,
    "price": "68.00",
    "option1": "color-3",
    "option2": "34F",
    "inventory_quantity": 264
  },
  {
    "id": 4615725842469,
    "price": "68.00",
    "option1": "color-4",
    "option2": "32E",
    "inventory_quantity": 214
  },
  {
    "id": 4615725908005,
    "price": "68.00",
    "option1": "color-4",
    "option2": "34D",
    "inventory_quantity": 133
  },
  {
    "id": 4615725973541,
    "price": "68.00",
    "option1": "color-4",
    "option2": "34F",
    "inventory_quantity": 891
  },
  {
    "id": 6989673398329,
    "price": "68.00",
    "option1": "color-5",
    "option2": "32E(DD)",
    "inventory_quantity": 98
  },
  {
    "id": 6989673431097,
    "price": "68.00",
    "option1": "color-5",
    "option2": "32F",
    "inventory_quantity": 98
  },
  {
    "id": 6989673463865,
    "option1": "color-5",
    "option2": "34D",
    "inventory_quantity": 8
  },
  {
    "id": 6989673496633,
    "price": "68.00",
    "option1": "color-5",
    "option2": "34E",
    "inventory_quantity": 348
  }
]  

使用lodash在我的类组件中进行分组，如下所示。这是通行证

input这是“颜色1”，“颜色2”，..

产品详细信息.js

export default class ProductDetail extends Component {
constructor(props) {
    super(props)
    console.log('props -- ', props);

    this.state = {
        color: 'color-1',
        stock: ''
    }
}


groupBy(input) {
    const groupByColor = _(this.props.variants)
                        .groupBy(x => x.option1)
                        .map((value, key) => ({ color: key, details: value }))
                        .value();
}  

使用groupBy我在我的 render() 中使用这个函数如下所示。基本上尝试使用下面显示的一堆控制台输出来提取数据只是为了测试。希望这有助于重现该问题。

render() {
    const val = this.groupBy(this.state.color);
    console.log(val);
    console.log(val[0]);
    console.log(Object.keys(val));
    console.log(JSON.stringify(val[0]));

Answer 1

无法读取未定义的属性意味着您正在查找 ID 的对象不存在。当解释器不理解或无法找到您期望存在的对象时，会抛出未定义。

在脚本的特定情况下，这意味着该对象尚未完全构建并且在调用脚本时可用，这可能是由于您使用 ajax/xhr 调用和在您发出对象 id 请求的同时，信息不会到达那里。