Question

为什么会出现 TypeError：无法读取未定义的属性‘0’？

2018-08-07

76

javascript arrays reactjs ecmascript-6

我正在从 woocommerce 中提取数据。

我已在 render() 中将其定义为： const product2 = this.state.products2;

现在我想在这个返回的对象中定位一个特定的值，如下所示： const defaultLace = product2.default_attributes[0].option

但是，上面的代码会呈现类型错误，但 const defaultLace = product.default_attributes; 不会呈现错误，并且在控制台中我可以通过这种方式看到类似的数据；

      default_attributes: [
        {
          id: 0,
          name: "Lace",
          option: "Closure"
        }
      ]

这里发生了什么，导致这个 const defaultLace = product2.default_attributes[0].option 呈现错误？

有什么帮助吗？

---编辑----

损坏的代码复制：XXXX

Answer 1

products2 在请求完成之前最初是一个空数组，因此访问 products2.default_attributes 将给出 undefined ，并尝试访问 [0] 将导致错误。

您可以等待渲染，直到 products2 数组已填充数据。

示例

render() {
  const product2 = this.state.products2;

  if (product2.length === 0) {
    return null;
  }

  const productSize = product2[0].default_attributes[0].option;

  return (
    <div>
      <h1>{productSize}</h1>
    </div>
  );
}

Answer 2

此代码没有问题。

但是，当您从远程服务器检索数据时，您必须检查数据是否存在且在您的结构中。

当您使用

const defaultLace = product2.default_attributes[0].option

时，您必须检查数据为：

if(product2 && product2.default_attributes && Array.isArray(product2.default_attributes) && product2.default_attributes.length > 0) {
    const defaultLace = product2.default_attributes[0].option
} else {
   throw new Error('Bad data');
}