如何理解错误“ TypeError：无法读取未定义的属性'id'”？

Question

我试图在这里理解基本概念。我知道这是一个普遍的问题，可以肯定的是，有一个简单的解释似乎没有得到。在这里，我试图访问我无法访问的对象的不同属性。

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

当我尝试此console.log(val[0]);时，输出为：

只需在该数组中获取第一个对象即可。

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

还使用console.log(Object.keys(val));检查密钥并使用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，即'color-1'，'color-2'..

product-detail.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

cannot read property of undefined表示您要查找其ID的对象不存在。当解释器无法理解或找不到您期望在那里的对象时，将引发未定义。

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