React中map函数报错：Uncaught TypeError: map is not a function

问题根源 #

1. 组件参数接收错误：React函数组件的第一个参数是props对象，不是直接传入的数组。你写的const Directory = (categories) => {...}里，categories其实是props对象，不是你传入的数组，自然没有map方法。
2. App组件未正确传递数据：你的App组件return为空，没有渲染Directory组件并传入categories数据。

修复方案 #

1. 修正Directory组件的参数接收 #

有两种写法可选：

写法一：解构props

直接从props中解构出categories数组：

const Directory = ({ categories }) => {
  return (
    <div className='directory-container'>
      {/* 可选：用可选链处理可能的空值 */}
      {categories?.map((category) => (
        <CategoryItem key={category.id} category={category} />
      ))}
    </div>
  );
};

写法二：直接使用props对象

如果不想解构，直接通过props访问categories：

const Directory = (props) => {
  return (
    <div className='directory-container'>
      {props.categories?.map((category) => (
        <CategoryItem key={category.id} category={category} />
      ))}
    </div>
  );
};

2. 修复App组件，传递数据 #

确保导入必要的组件和数据，并正确渲染Directory：

// 替换成实际的文件路径
import { categories } from './categories';
import Directory from './Directory';
import CategoryItem from './CategoryItem';

const App = () => {
  return (
    <div className="app">
      <Directory categories={categories} />
    </div>
  );
};

export default App;

额外防护：处理非数组情况 #

如果担心categories可能不是数组（比如异步加载时初始值为null/undefined），可以添加兜底处理：

{(categories || []).map((category) => (
  <CategoryItem key={category.id} category={category} />
))}

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