遍历User数组时触发users.map is not a function错误求助

核心问题分析 #

1. 运行时传入的users并非数组类型 #

TypeScript的类型注解仅做编译时校验，如果调用UserList组件时传入的实际值不是数组（比如null、普通对象、undefined，或是后端返回的非数组格式数据），运行时就会触发map is not a function错误。

2. map回调函数无有效返回值 #

你的map回调用大括号{}包裹，但没有显式返回JSX元素，相当于默认返回undefined，即使遍历逻辑正常，也不会渲染任何内容。

修复后的代码 #

type User = {
  name: string;
  id: string;
  jp: string;
};

export function UserList(users: User[]) {
  // 运行时强制校验数组类型，兜底异常情况
  if (!Array.isArray(users)) {
    return <div>No users available</div>;
  }

  return (
    <div>
      {users.map((user) => (
        // React列表必须添加唯一key属性
        <div key={user.id}>
          <span>Name: {user.name}</span>
          <span>ID: {user.id}</span>
        </div>
      ))}
    </div>
  );
}

额外注意事项 #

• 调用UserList前，务必确认传入的users是数组类型，比如后端接口返回数据后先做格式校验，避免把对象、null等非数组值传入。
• React列表渲染必须给每个子元素添加唯一key属性，这是React优化渲染的必要条件，也能避免控制台警告。

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