Question

未捕获的类型错误：无法读取未定义的属性（读取“数据”）

2023-06-12

6870

javascript reactjs typeerror

我使用 Stripe 进行 Api 集成。我正在使用主页 API 集成我在类别部分使用映射循环我收到此错误我期待主页 API 集成我不断收到错误 Uncaught TypeError：无法读取未定义的属性（读取“数据”）

import "./Category.scss";

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

const Category = ({ categories }) => {
  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;

Answer 1

categories 属性未从父组件正确传递。确保 categories 属性按预期传递，并且不为 null 或未定义。
categories 属性正在异步获取，在首次呈现 Category 组件时可能不可用。在尝试访问其数据属性之前，请考虑添加检查以查看 categories 是否为 null 或未定义

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

const Category = ({ categories }) => {
  if (!categories) {
    return null; // or a loading spinner or error message
  }

  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;

Answer 2

在从服务器接收数据之前，categories 变量未定义，导致此错误。要解决此问题，您应该在代码中检查“categories”。

以下是修改后的代码：

const Category = ({ categories }) => {
  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;