React组件报错TypeError: Cannot read properties of undefined (reading 'map')求助

这个错误的核心原因是categories.data为undefined，你可以从以下几个方向排查修复：

1. 修正组件的props接收方式 #

函数组件的第一个参数是整个props对象，如果父组件是通过<Category categories={你的数据} />传递数据，你当前的写法里变量categories其实是props对象，而非需要的分类数据。要通过解构获取正确属性：

// 解构props中的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={process.env.REACT_APP_STRIPE_APP_DEV_URL + item.attributes.img.data.attributes.url} alt={item.attributes.name || '分类图片'} />
          </div>
        ))}
      </div>
    </div>
  );
};

2. 添加数据加载的安全判断 #

即使props传递正确，异步加载的数据初始状态可能是undefined或null，直接调用map会报错。可以通过两种方式避免：

方式一：使用可选链和空值合并 #

const Category = ({ categories }) => {
  return (
    <div className="shop-by-category">
      <div className="categories">
        {categories?.data?.map((item) => (
          <div key={item.id} className="category">
            <img 
              src={`${process.env.REACT_APP_STRIPE_APP_DEV_URL}${item.attributes.img.data.attributes.url}`} 
              alt={item.attributes.name || '分类图片'} 
            />
          </div>
        )) || <p>加载中...</p>}
      </div>
    </div>
  );
};

方式二：条件判断渲染 #

const Category = ({ categories }) => {
  // 先判断数据是否存在
  if (!categories?.data) {
    return <div className="shop-by-category"><p>加载中...</p></div>;
  }

  return (
    <div className="shop-by-category">
      <div className="categories">
        {categories.data.map((item) => (
          <div key={item.id} className="category">
            <img 
              src={`${process.env.REACT_APP_STRIPE_APP_DEV_URL}${item.attributes.img.data.attributes.url}`} 
              alt={item.attributes.name || '分类图片'} 
            />
          </div>
        ))}
      </div>
    </div>
  );
};

3. 确认父组件传递的数据结构 #

检查父组件传递给<Category />的categories是否符合预期：

• 确保categories是包含data属性的对象
• 确保categories.data是数组（即使是空数组，map也能正常执行）

比如父组件异步请求时，初始状态应设为{ data: [] }而非undefined：

// 父组件示例
const ParentComponent = () => {
  const [categories, setCategories] = useState({ data: [] });

  useEffect(() => {
    // 模拟异步请求
    fetch('/api/categories')
      .then(res => res.json())
      .then(data => setCategories(data));
  }, []);

  return <Category categories={categories} />;
};

内容的提问来源于stack exchange，提问作者Robin Dhami