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

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

下面是我使用

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代码和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在下面显示的my class组件中分组。这是通行证

输入
哪个是'color-1'，'color-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]));

无法读取未定义的属性
表示您正在查找ID的对象不存在。当解释器不理解或找不到您预期的对象时，将抛出Undefined

在脚本的特定情况下，这意味着在调用脚本时对象尚未完全构建并可用，这可能是因为您在使用ajax/xhr调用时，在请求对象id的同时没有收到信息。
请将错误转移到问题本身。最好使用文本，而不是图像。图像不能复制粘贴到文本文档中，也请给我们足够的代码，如行出现的上下文，否则我们无法真正帮助您做到这一点。在您试图引用的作用域中，
val[0]。id
对
val
的引用丢失，因此您会收到该消息。正如我前面的其他人所说，我们需要更多的背景。如果可以，提供代码的简化版本，而不暴露不相关的部分。在编程中解释您的操作和意图的做法是最好的做法。您是否在没有代码的情况下一个接一个地调用console.log（val[0]）和console.log（val[0].id）？谢谢您帮助我理解。这是正确的，因为我测试过使用setTimeout（）同步获取数据，然后获取属性值。如果知道是否有办法实现异步并访问属性，那还是很好的。我会看一看，但我认为您可以使用xhr加载它。onload=yourfunc让我知道这是否有助于我更仔细地查看代码，我无法告诉您使用xhr从何处提取数据以对应用程序进行准确修复。