访问 cart.order_items.length 会给出类型错误：无法读取未定义的属性'length'

Question

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>

Answer 1

您正在应用的空值检查是在cart对象上，而不是在属性order_items上。因此，如果cart.order_items的值undefined或null则会发生此错误。为了确保您不会读取未定义或 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)