我正在开发我的第一个全栈 MERN 应用程序,它允许用户将多个地点添加到数组中。尝试使用 .length
映射数组以显示用户的地点数量。代码在不使用 .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
,以便继续工作。谢谢!
items
未定义,你尝试过记录它吗?你必须将items
作为 props 传递给UsersList
。<UsersList items={someArrayOfItems} />
- JEEngineer