开发者问题收集

类型错误:无法读取未定义的属性(读取‘长度’)

2023-01-03
18459

我正在开发我的第一个全栈 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 ,这样我就可以继续工作了。谢谢!

3个回答

将此 if 条件从:

if (props.items.length === 0) {

更改为

if (!props.items?.length) {

应该可以工作。

同样,如果用于位置,则可以使用三元运算符检查位置数组中是否存在长度。

怎么做?因为来自 api 的项目可能为 nullundefined ,因此数组上的 length 属性可能缺失。

此外,如果项目的长度为 0 或为 null 或 undefined 或任何假值,则使用 ! 非运算符会使此条件为真

Murtaza Hussain
2023-01-03

其他答案都集中在 prop.items 列表上,但是您在问题中提到,在尝试访问 user 内的 places 的长度时会出现异常。

您收到错误消息是因为某些用户可能没有列出任何地点,因此没有地点列表 ->没有长度属性。

要解决这个问题,您需要检查地点列表是否存在,然后访问其长度:

placeCount={ user.places ? user.places.length : 0 }

在这里,我们使用三元运算符来检查 user.places 是否存在,然后我们使用长度,否则使用零。

编辑: 正如 Phil 在下面的评论中指出的那样,您还可以使用合并运算符,它更简洁,如下所示:

placeCount={ user.places?.length ?? 0 }

语法只是转换为如果 user.places 具有长度值,则使用该值,否则使用零作为默认值。

kRiZ
2023-01-03

您可以为 items 定义一个默认值来修复此问题。

const UsersList = ({ items = [] }) => {
  if (items.length === 0) {
    return (
      ...
    );
  }

  return (
    <ul className="users-list">
      {items.map((user) => (
        ...
      ))}
    </ul>
  );
};
h7n
2023-01-03