开发者问题收集

TypeError:无法读取 reactjs 中未定义的属性“length”

2020-05-03
3682

当我尝试在 React 中返回数组的长度时遇到问题。错误是“TypeError:无法读取未定义的属性‘length’”。我已将其放在另一个子组件中并且它可以工作,但是当我在 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" alt="Red Onion Food"/></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;

I dont know what to do!!!

3个回答

您需要根据数组的存在情况来缩短渲染时间。您尝试在 prop 可用之前渲染 order 的长度。

尝试以下操作:

<div><h6>{order && order.length}</h6></div>
Andy Hoffman
2020-05-03

未定义错误是因为 订单当时不可用 ,所以您需要检查 订单 是否存在,然后执行。

{order ? order.length : 0}
Arun Kumar
2020-05-03

其他答案几乎解决了这个问题,即您试图从字面上说 undefined.length ,因为在创建/更新组件时未定义 prop order

但在我看来,还有一个更干净的解决方案 - order?.length

what-if-not 的逻辑(来自@arun-kumar 的回答) - 也可以写成 - order?.length ?? 0order?.length || 0

更多信息 -

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

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

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

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

H S
2020-05-03