类型错误:无法读取未定义的属性(读取‘长度’)
我正在开发我的第一个全栈 MERN 应用程序,它允许用户将多个位置添加到数组中。尝试映射数组以显示用户的地点数量。代码运行良好,直到我使用
.length
,然后它崩溃了。
import React from 'react';
import UserItem from './UserItem';
import Card from '../../shared/components/UIElements/Card/Card';
import './UsersList.css';
const UsersList = props => {
if (props.items.length === 0) {
return (
<div className="center">
<Card>
<h2>No users found.</h2>
</Card>
</div>
);
}
return (
<ul className="users-list">
{props.items.map(user => (
<UserItem
key={user.id}
id={user.id}
image={user.image}
name={user.name}
// placeCount={user.places.length}
placeCount={user.places}
/>
))}
</ul>
);
};
export default UsersList;
完整的错误堆栈:
Uncaught TypeError: Cannot read properties of undefined (reading 'length')
The above error occurred in the <UsersList> component:
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
我在后端和前端文件中对
.length
进行了关键字搜索,以仔细检查代码并确保我在任何地方都没有拼写错误——但我无论如何也想不出为什么添加
.length
不起作用。
我在这里浏览了几篇不同的帖子,但找不到可行的解决方案。
任何见解都将不胜感激。现在我只是注释掉了
.length
,这样我就可以继续工作了。谢谢!
将此
if
条件从:
if (props.items.length === 0) {
更改为
if (!props.items?.length) {
应该可以工作。
同样,如果用于位置,则可以使用三元运算符检查位置数组中是否存在长度。
怎么做?因为来自 api 的项目可能为
null
或
undefined
,因此数组上的
length
属性可能缺失。
此外,如果项目的长度为 0 或为 null 或 undefined 或任何假值,则使用
!
非运算符会使此条件为真
其他答案都集中在
prop.items
列表上,但是您在问题中提到,在尝试访问
user
内的
places
的长度时会出现异常。
您收到错误消息是因为某些用户可能没有列出任何地点,因此没有地点列表 ->没有长度属性。
要解决这个问题,您需要检查地点列表是否存在,然后访问其长度:
placeCount={ user.places ? user.places.length : 0 }
在这里,我们使用三元运算符来检查
user.places
是否存在,然后我们使用长度,否则使用零。
编辑: 正如 Phil 在下面的评论中指出的那样,您还可以使用合并运算符,它更简洁,如下所示:
placeCount={ user.places?.length ?? 0 }
语法只是转换为如果 user.places 具有长度值,则使用该值,否则使用零作为默认值。
您可以为
items
定义一个默认值来修复此问题。
const UsersList = ({ items = [] }) => {
if (items.length === 0) {
return (
...
);
}
return (
<ul className="users-list">
{items.map((user) => (
...
))}
</ul>
);
};