Question

我正在从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

此代码正常。

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

使用时

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');
}

Answer 2

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>
  );
}

为什么出现TypeError：无法读取未定义的属性“ 0”？

2 个答案: