React组件出现Uncaught TypeError: 无法读取undefined的categories属性求助

错误原因 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'categories')，核心问题是调用renderCategories(category.categories)时，category变量未定义（或值为undefined），导致无法读取它的categories属性。

代码中的问题 #

1. 未定义category变量：组件内既没有从props接收category，也没有通过状态初始化该变量，直接使用会导致category为undefined。
2. renderCategories函数逻辑错误：函数内组装了用于渲染的myCategories数组，但最后返回的是原categories参数，而非组装好的JSX列表，就算数据正常也无法渲染出预期的列表项。

修复步骤 #

1. 确保category有合法数据源 #

• 如果category是父组件传入的props，先从props解构获取：

  const Category = ({ category }) => { // 从props接收category
    // ... 其他代码
  };
  

• 如果是组件本地状态，初始化带默认值的状态：

  import { useState } from 'react';
  
  const Category = () => {
    // 初始化包含categories空数组的对象，避免初始值为undefined
    const [category, setCategory] = useState({ categories: [] });
    // ... 其他代码
  };
  

2. 修正renderCategories的返回值 #

将函数的返回值改为组装好的myCategories数组，同时修改内部变量名避免和外部category混淆：

const renderCategories = (categories) => {
    let myCategories = [];
    for (let categoryItem of categories) {
      myCategories.push(
        <li key={categoryItem.title}>
          {categoryItem.title}
        </li>
      );
    }
    return myCategories; // 返回组装好的JSX列表
};

3. 可选：添加空值保护（容错处理） #

使用可选链操作符?.和默认空数组，避免数据未加载完成时再次报错：

return (
  <Fragment>
    <ul>{renderCategories(category?.categories || [])}</ul>
  </Fragment>
);

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