Question

当我尝试在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;

我不知道该怎么办！

Answer 1

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

尝试以下操作：

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

Answer 2

未定义的错误是由于order is not available that time引起的，因此您需要检查order是否存在，然后执行。

{order ? order.length : 0}

Answer 3

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

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

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

TypeError：无法读取reactjs中未定义的属性'length'

3 个答案: