如何解决 React 中的“无法读取 undefined 属性”错误？

javascript

2024-03-20 09:43:37

无法读取 undefined 属性：解决 Cannot read properties of undefined (reading 'data') 错误

导言

在 React 应用程序中，Cannot read properties of undefined (reading 'data') 错误是一个常见的错误。本文将探讨该错误的原因并提供解决方法，帮助开发者有效地处理此问题。

错误原因

Cannot read properties of undefined 错误通常发生在你尝试访问一个不存在或未初始化的对象或数组的属性时。在 React 组件中，这通常意味着你正在尝试映射一个未定义的数据源。

该错误的常见原因包括：

数据源未正确初始化
数据源不存在所需属性
数据源为空数组或对象

解决方法

要解决此错误，需要确定其根本原因并采取相应的措施：

1. 检查数据源初始化

首先，检查数据源是否正确初始化。它应该是一个包含数据的数组或对象。如果它是一个空数组或对象，请在映射数据之前处理这种情况。

2. 验证属性存在

接下来，确认数据源确实包含你正在尝试访问的属性。如果它不存在，你需要更新代码以访问正确的数据源。

3. 处理空数据源

最后，检查数据源是否为空。如果它是空的，你可以选择显示一条错误消息或处理空数组或对象的情况。

修改后的代码示例

以下是如何修改你的代码以处理这些可能的错误：

import "./Category.scss";

import cat1 from "../../../assets/category/Hoodies.jpg";

const Category = ({ categories }) => {
  if (!categories || !categories.data) {
    return <div>加载类别...</div>;
  } else if (categories.data.length === 0) {
    return <div>没有可用类别</div>;
  }

  return (
    <div className='shop-by-category'>
      <div className='categories'>
        {categories.data.map((item) => (
          <div key={item.id} className='category'>
            <img src={cat1} alt='' />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Category;