为啥 TypeError：无法读取未定义的属性“0”？

Posted 2023-02-22

【中文标题】为啥 TypeError：无法读取未定义的属性“0”？

【英文标题】：Why the TypeError: Cannot read property '0' of undefined?为什么 TypeError：无法读取未定义的属性“0”？

【发布时间】：2019-01-15 01:52:11

【问题描述】：

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

【问题讨论】：

请创建一个Minimal, Complete, and Verifiable example 来显示您遇到的错误。

codeandbox.io 示例似乎按预期工作 - 您能否详细说明您期望的结果？

感谢大家的意见 - 我已经在上面添加了错误复制。谢谢。

【参考方案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>
  );

【讨论】：

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

@kadddeee 当然，如果没有看到请求响应的样子很难说，但是由于您的状态中有一个数组，我认为products2 也是请求之后的一个数组。你不能访问数组上的default_attributes。

嘿@Tholle，这在这里有效吗？ const productSize = !!product2.length && product2.default_attributes[0].option;

但是如果这个数组没有长度，那么左边将是假的，因此productSize 将是假的，什么都不会被渲染。获取后，它将是所需的值。我说的不对吗？我只是尝试在这里考虑替代方案，并指出特别之处:)

是 !!product2.length 返回错误。我以前从未见过这个符号，所以我会阅读它，所以感谢您提出这个潜在的替代方案@devserkan。感谢您花时间解释@Tholle。

【参考方案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');

【讨论】：

感谢您的回复@Aleš Dostál