Javascript 类型错误原因：无法读取属性'；0'；未定义的？

我正在从woocommerce提取数据

我在我的

render（）中定义为：
const product2=this.state.products2

现在，我希望以此返回对象中的特定值为目标：
const defaultLace=product2.默认属性[0]。选项

但是，上面呈现了一个类型错误，但是
const defaultLace=product.default\u属性不会出现错误，在控制台中，我可以看到类似的数据

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

此
const defaultLace=product2.default\u属性[0]。选项
呈现错误时发生了什么

有什么帮助吗

---编辑----

断码复制：XXXX
此代码正常

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

当你使用

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

products2
在请求完成之前最初是一个空数组，因此访问
products2.default\u属性
将给出
未定义的
，尝试访问上的
[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>
  );
}

render（）{
const product2=this.state.products2；
如果（product2.length==0）{
返回null；
}
const productSize=product2[0]。默认的_属性[0]。选项；
返回(
{productSize}
);
}
请创建一个显示您所遇到错误的示例。codesandbox.io示例似乎按预期工作-您能否提供更多有关预期结果的详细信息？感谢各位的输入-我已在上面添加了错误复制。谢谢，太棒了！谢谢@Tholle，这很有道理。还有，为什么这里引用索引
product2[0]
？@kadddeee当然，如果不看请求-响应的样子，很难说，但是由于您所在的州有一个数组，我认为
products2
也是请求后的数组。您无法访问数组上的
default\u属性。
。嘿@Tholle，这在这里有效吗<代码>常量productSize=！！product2.length&&product2.default_属性[0]。选项但如果此数组没有长度，则左侧将为false，因此
productSize
将为false，不会呈现任何内容。获取后，它将是所需的值。我说得对吗？我只是试着在这里考虑其他选择，特别是：）是的
！！product2.length
返回一个false。我以前从来没有见过这个符号，所以我将仔细阅读它，所以感谢您提出这个潜在的替代方法@devserkan。感谢您花时间解释@Tholle。感谢您的回复@AlešDostál