TypeError：无法读取reactjs中未定义的属性“长度”

Posted 2023-02-25

【中文标题】TypeError：无法读取reactjs中未定义的属性“长度”

【英文标题】：TypeError: Cannot read property 'length' of undefined in reactjs

【发布时间】：2020-05-03 07:38:23

【问题描述】：

当我尝试在反应中返回数组的长度时，我遇到了问题。错误是'TypeError：无法读取未定义的属性'长度'。我已将它放在另一个子组件中并且它可以工作，但是当我在 NavBar 中尝试时它只显示错误。

import React from 'react';
import './NavBar.css';
import  FontAwesomeIcon  from '@fortawesome/react-fontawesome';
import  faCartPlus  from '@fortawesome/free-solid-svg-icons';

const NavBar = (props) => 
    const order = props.cart
    return (
        <div className='container-fluid'>
            <nav className="navbar navbar-expand-lg navbar-light  justify-content-md-between justify-content-center flex-wrap">
                <a href="/"><img src="https://i.ibb.co/NZcQbJM/logo2.png" /></a>

                <div>
                    <a href="/" className='nav-item' > <FontAwesomeIcon icon=faCartPlus /></a>
                    <a href="/" className='nav-item login'>Login</a>
                    <a href="/" className='nav-item'><button className="btn btn-danger btn-rounded">Sign Up</button></a>
                </div>
            </nav>
            <div><h6>order.length</h6></div>
        </div>
    );
;

export default NavBar;

我不知道该怎么办！！！

【问题讨论】：

你如何渲染 NavBar，你应该将一个名为 cart 的 prop 传递给 navbar，它是一个数组。

你应该提供NavBar的父元素的代码，人们可以知道cart是怎样的，cart怎样成为NarBar的props。

【参考方案1】：

您需要根据数组的存在来短路渲染。您正在尝试在道具可用之前渲染 order 的长度。

尝试以下方法：

<div><h6>order && order.length</h6></div>

【参考方案2】：

未定义的错误是因为order is not available that time，所以需要检查order是否存在，然后执行。

order ? order.length : 0

【参考方案3】：

其他答案几乎解决了问题，即您试图从字面上说undefined.length，因为在创建/更新组件时的某个阶段没有定义道具order。

但 IMO 仍然有一个更清洁的解决方案 - order?.length。

what-if-not 的逻辑（来自@arun-kumar 的回答）——也可以写成——order?.length ?? 0 或order?.length || 0。

更多关于它 -

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Operators/Optional_chaining

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

https://github.com/facebook/create-react-app/releases/tag/v3.3.0 - CRA v3.3 已经支持这些。

更新 - 解构也是一种更简洁的方式。我经常使用它，因为它允许在未定义的情况下初始化 prop，但很容易被不同类型的值覆盖 - 因此我认为可选链比它更有优势。