为什么会出现TypeError: Cannot read property '0' of undefined错误？

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

- kadddeee

---

请创建一个最小化、完整化和可验证化的示例，以展示您所遇到的错误。 - Tholle

codesandbox.io的示例似乎按预期工作 - 你能否请提供一些关于你期望的结果的更多细节？ - Dacre Denny

谢谢大家的建议 - 我已经添加了上面的错误复制。谢谢。 - kadddeee

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

- Aleš Dostál

---

感谢您的回复，@Aleš Dostál。 - kadddeee

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

- Tholle

---

太棒了！谢谢@Tholle，这很有道理。还有为什么在这里引用索引product2[0]？ - kadddeee

如果product2是一个数组，那么product2.default_attributes将会返回undefined。 - Tholle

但如果这个数组没有长度，那么左侧将会是false，因此productSize也将是false，什么都不会被渲染。在获取之后，它将成为所需的值。我只是在尝试思考替代方案，没有特别的意思 :) - devserkan

有点困惑。第一次!!product2.length返回false，因此我们没有尝试去访问它。我想我需要尝试一下。无论如何，谢谢。 - devserkan

是的，!!product2.length 返回 false。我从未见过这种表示法，所以要去了解一下，感谢 @devserkan 提出这个潜在的替代方案。同时也感谢 @Tholle 花时间解释。 - kadddeee