Question

似乎无法访问数组中的对象属性

2020-11-23

50

javascript reactjs

控制台输出：

{
  295798: {
    box_type: "QB",
    color: "Assorted",
    floor_allowed: 2100,
    grade: false,
    head_size: null,
    is_special: "0",
    length: false,
    live_inventry: "1",
  }
}

我有一个数组，如上面的 chrome 控制台屏幕截图所示。当我打印出该数组时，它就会出现。

console.log(props.thisData);
console.log(props.thisData[0].color);

props.thisData 显示整个数组。但是，当我尝试访问颜色时，我收到以下错误：

Product.jsx:56 Uncaught TypeError: Cannot read property 'color' of undefined

Answer 1

控制台输出中的数据结构不是 Array 。它是一个以数字为键的 Object 。似乎没有键为 0 的元素（对象中没有属性 0 ）。因此，您得到未定义的结果。

要访问您的颜色属性，您必须通过对象上的键来访问它：

props.thisData['295798'].color

更新

如果您想使用数组，我建议您将对象转换为数组，并将键作为 id 添加到每个元素。

const dataArray = Object
  .keys(props.thisData)
  .map(key => ({ id: key, ...props.thisData[key] }))