javascript - 访问 cart.order_items.length 给出 TypeError: Cannot read property 'length' of undefined
问题描述
TypeError: Cannot read property 'length' of undefined
当我运行我的 Django 和 ReactJs 电子商务应用程序时,编译器就是这么说的。我需要做什么?
错误位置如图cart.js
> 53 | text={`${cart !== null ? cart.order_items.length : 0}`}
> ^ 54 | pointing
错误位置如图所示Layout.js
> 33 | dispatch(cartSuccess(res.data));
> ^ 34 | })
在action/cart.js
export const fetchCart = () => {
return dispatch => {
dispatch(cartStart());
authAxios
.get(orderSummaryURL)
.then(res => {
dispatch(cartSuccess(res.data));
})
.catch(err => {
dispatch(cartFail(err));
});
};
};
在Layout.js
<Menu.Menu inverted position="right">
<Dropdown
icon="filter"
loading={loading}
text={`${cart !== null ? cart.order_items.length : 0}`}
pointing
className="link item"
>
<Dropdown.Menu>
<Dropdown.Item>List Item</Dropdown.Item>
<Dropdown.Item>List Item</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Header>Header Item</Dropdown.Header>
<Dropdown.Item>
<i className="dropdown icon" />
<span className="text">Submenu</span>
<Dropdown.Menu>
<Dropdown.Item>List Item</Dropdown.Item>
<Dropdown.Item>List Item</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Item>
<Dropdown.Item>List Item</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Menu.Menu>
解决方案
您正在应用的空值检查是在cart
object 而不是 property上order_items
。因此,如果是的值cart.order_items
或undefined
发生null
此错误。为了确保您没有读取未定义或空值的长度,您还需要对order_items
属性应用检查。
用它替换第 53 行将解决您的问题:
text={`${cart ? (cart.order_items ? cart.order_items.length : 0) : 0}`}
要更深入地了解此条件的工作原理,请参见以下代码段:
const cart0 = null
const cart1 = undefined
const cart2 = {}
const cart3 = { order_items: null }
const cart4 = { order_items: [] }
const cart5 = { order_items: ["Apple", "Banana", "Pineapple"] }
function cartLength(detail, cart) {
console.log(
detail,
cart
? cart.order_items
? cart.order_items.length
: "cart.order_items is undefined or null"
: "Cart undefined or null"
)
}
cartLength("Cart 0: ", cart0)
cartLength("Cart 1: ", cart1)
cartLength("Cart 2: ", cart2)
cartLength("Cart 3: ", cart3)
cartLength("Cart 4: ", cart4)
cartLength("Cart 5: ", cart5)
推荐阅读
- visual-studio - Visual Studio 中的包管理器控制台不显示命令提示符
- sql - 使用 invoke-sqlcmd 检索运行查询的结果
- wpf - 组合框:清除所有项目后,添加一些新的,设置所选项目不起作用
- postgresql - 最好使用 SERIAL PRIMARY KEY 或 GENERATED ALWAYS AS IDENTITY 作为 PostgreSQL 中的主键
- javascript - 遍历上述 JSFiddle 中的每个列表项并执行以下操作:
- sql - 查找分配给单个路由器但也是分配给公共路由器的 IP 的一部分的 IP
- javascript - Javascript 动画闪烁
- json - 在 DataWeave 中连接来自两个数组的值
- python - 如何使用 Python 获取父 USB 设备信息?
- oracle - 无法看到 SQL Developer 物化视图 SQL