尽管检查未定义，但无法读取未定义的属性“长度”答案

【问题标题】：Cannot read property 'length' of undefined despite check for undefined尽管检查未定义，但无法读取未定义的属性“长度”
【发布时间】：2018-12-28 00:01:50
【问题描述】：

我正在编写一些代码来基于数组中的项目生成 JSX，但是我收到错误“无法读取未定义的属性“长度””，尽管已检查该变量是否实际上未定义。代码真的很长，所以我把问题总结在这里：

render() {
    var metadata = this.props.data["metadata"]

    if(typeof metadata !== undefined && metadata.length !== undefined) {

        for(var i=0; i<metadata.length; i++) {
            console.log(metadata[i]);
        }

    }

}

render 方法在一个组件内部，通过这样做，它被放置在另一个组件内部

<Marksheet data={this.state.data} />

我已检查以确保数据已实际定义并作为道具提供，但即使它未定义，我也不明白为什么它说无法读取未定义的属性长度。

【问题讨论】：

!== 'undefined' -> !== undefined
您在metadata .length 中有一个空格，就在点之前...是复制粘贴错误吗？
也可以简化为if (metadata && metadata.length) { ... }
@LGSon 空间问题，只要它实际上是一个空间。如果它是一个奇怪的 unicode 字符，那就有问题了。
@LGSon 点前的空格虽然可能是无意的，但不会对代码产生任何影响

标签： javascript reactjs

【解决方案1】：

您也可以使用Array.isArray 方法：

render() {
    var metadata = this.props.data["metadata"];
    if(Array.isArray(metadata)) {
      metadata.forEach(val => console.log(val));
    }
}

【讨论】：

这个条件检查简单而简短。无需担心它是 undefined 还是 null。 Array.isArray 足以进行条件检查，因此为您 +1 投票
我刚试过isArray。奇怪的是，它仍然出现同样的错误。我试过 if(Array.isArray(metadata)) { console.log("it's an array!") console.log("the length is: " + metadata.length) 正确打印出长度，但javascript控制台仍然说无法读取未定义的属性长度，并且应用程序崩溃:(
那个错误不可能来自那个代码，你在别的地方有一些容易出错的代码。也许在 componentDidMount 中？
你是对的。看起来代码的另一部分给出了同样的错误

【解决方案2】：

字符串"undefined"与undefined不同。

尝试将您的代码更改为以下内容：

render() {
    var metadata = this.props.data["metadata"]

    if(metadata !== undefined && metadata.length !== undefined) {
        for(var i=0; i<metadata.length; i++) {
            console.log(metadata[i]);
        }
    }
}

这基本上是在运行 for 循环之前检查以确保 metadata 和 metadata.length 不等于 undefined。

【讨论】：

感谢您的快速回复！我已将其更改为 underfined 而不是 'undefined' 但我仍然遇到同样的错误。还检查了 null
@RayA。当然！您可以尝试打印metadata 等于什么吗？
做console.log("Metadata: " + metadata) 打印出"Metadata: Student name, task_id,..."
@RayA。那么metadata 的定义看起来像。您确定您发布的错误是正确的并且发生在您所说的地方吗？
我已经仔细检查了错误。这是出现在 javascript 控制台中的内容：Uncaught TypeError: Cannot read property 'length' of undefined at ProxyComponent.render ... 组件中发生了上述错误：在 Marksheet 中（在 Interaction.jsx:579）

【解决方案3】：

或者只是简单的。你也可以检查metadata.length >0 (instead of just length)

render() {
    var metadata = this.props.data["metadata"]

    if(metadata && metadata.length) {

        for(var i=0; i<metadata.length; i++) {
            console.log(metadata[i]);
        }

    }

}

【讨论】：