[英]TypeError: Cannot read property 'length' of undefined in reactjs
当我尝试在反应中返回数组的长度时,我遇到了问题。 错误是'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" 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;
我不知道该怎么办!!!
您需要根据数组的存在来短路渲染。 您正在尝试在道具可用之前呈现order
长度。
尝试以下操作:
<div><h6>{order && order.length}</h6></div>
未定义的错误是因为order is not available that time
,因此您需要检查order
是否存在然后执行。
{order ? order.length : 0}
其他答案几乎解决了问题,即您试图从字面上说undefined.length
因为在创建/更新组件时的某个阶段未定义道具order
。
但是仍然有一个更清洁的解决方案 IMO - order?.length
。
并且what-if-not
的逻辑(来自@arun-kumar 的回答) - 也可以写成 - order?.length?? 0
order?.length?? 0
or order?.length || 0
order?.length || 0
.
更多关于它 -
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
https://github.com/facebook/create-react-app/releases/tag/v3.3.0 - CRA v3.3 已经支持这些。
更新- 解构也是一种更清洁的方式。 我经常使用它,因为它允许在未定义的情况下初始化道具,但很容易被不同类型的值覆盖 - 因此我认为可选链接比它更有优势。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.