React.js报错：TypeError: Cannot read property 'map' of undefined 求助

可能的原因 #

• 初始渲染时props未就绪：如果父组件通过异步请求获取数据，组件首次渲染时items还未被赋值，此时为undefined。即便后续数据加载完成，首次渲染的瞬间仍会触发错误。
• props传递拼写错误：父组件传递属性时，可能把items拼写成了其他名字（比如item、list），导致子组件接收的items始终是undefined。
• 数据源处理失误：父组件的数据源本身非空，但在传递给子组件前的逻辑中（比如状态解构、条件判断）出现错误，导致items被意外置为undefined。

修复方案 #

1. 给props设置默认值 #

在子组件中为items设置默认空数组，确保初始渲染时map方法能正常调用：

import React from 'react';

const MyComponent = ({ items = [] }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

2. 使用可选链操作符（ES2020+） #

通过?.操作符判断items是否存在，只有当它不为undefined/null时才调用map：

import React from 'react';

const MyComponent = ({ items }) => {
  return (
    <ul>
      {items?.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

3. 条件渲染 #

先判断items是否存在，再渲染列表，也可以返回加载提示替代null：

import React from 'react';

const MyComponent = ({ items }) => {
  if (!items) return <div>加载中...</div>;

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

4. 检查父组件的props传递 #

确认父组件中传递的属性名和子组件接收的items完全一致：

// 父组件中正确传递示例
<MyComponent items={yourDataSource} />

如果是异步请求场景，给父组件的数据源设置初始空数组，避免传递undefined：

// 父组件示例
const ParentComponent = () => {
  const [data, setData] = useState([]); // 初始化为空数组而非undefined

  useEffect(() => {
    fetchData().then(res => setData(res));
  }, []);

  return <MyComponent items={data} />;
};

内容的提问来源于stack exchange，提问作者Shubham Kumar Sinha