React中调用.map时报错“.map is not a function”的问题求助

核心原因 #

1. React组件参数定义错误：你当前把组件的第一个参数直接当成accountList数组，但React函数组件的第一个参数是props对象，并非单个数据。比如父组件传<AccountSummaryList accountList={myAccounts} />时，你拿到的accountList其实是{ accountList: myAccounts }这个对象，自然没有map方法，直接调用就会报错。
2. TypeScript类型标注不约束运行时：你给参数标注的Account[]只是编译时的类型检查，运行时如果传入的不是数组（比如props对象、undefined），类型标注无法阻止错误发生。
3. 条件判断失效的原因：当accountList是props对象时，它没有map方法，所以accountList.map为假，不会执行遍历，列表自然不显示；而暴力索引能用只是巧合——如果props对象刚好有数字索引属性（比如类数组对象），能取到值，但这不是正确的数组用法。

解决方案 #

1. 正确接收props并设置默认值 #

先修正组件的参数定义，从props里提取accountList，同时给它设置默认空数组，确保运行时永远是数组：

// 定义props的类型
interface AccountSummaryListProps {
  accountList: Account[];
}

export default function AccountSummaryList({ accountList = [] }: AccountSummaryListProps) {
  const listOfAccountSummaries = accountList.map((account, index) => (
    <li key={index}>
      <AccountSummary {...account} />
    </li>
  ));

  return <ul>{listOfAccountSummaries}</ul>;
}

2. 增加运行时数组校验（应对不确定的传参） #

如果不确定父组件会传入什么类型的值，可以在组件内部先校验是否为数组，不是则用空数组替代：

interface AccountSummaryListProps {
  accountList?: unknown;
}

export default function AccountSummaryList({ accountList }: AccountSummaryListProps) {
  // 运行时校验，确保是数组
  const validAccounts = Array.isArray(accountList) ? accountList : [];

  const listOfAccountSummaries = validAccounts.map((account, index) => (
    <li key={index}>
      <AccountSummary {...account} />
    </li>
  ));

  return <ul>{listOfAccountSummaries}</ul>;
}

3. 优化key的使用（可选） #

尽量避免用数组索引作为key，如果Account对象有唯一标识（比如id），改用这个标识作为key，能提升渲染性能：

// 假设Account对象包含唯一id字段
const listOfAccountSummaries = validAccounts.map((account) => (
  <li key={account.id}>
    <AccountSummary {...account} />
  </li>
));

父组件传参注意 #

确保父组件通过accountList属性传入数组：

// 父组件示例
const myAccounts: Account[] = [{/* 账号数据 */}, {/* 账号数据 */}];
<AccountSummaryList accountList={myAccounts} />

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