React使用Axios获取数据后调用employee.map报is not a function问题咨询

你提到的「是否因为上层Axios处理逻辑执行过map导致无法二次遍历」的猜测不成立，map是纯函数不会改变原数组，你上层处理后返回的新数组完全支持二次遍历，报错和该操作无关。

报错根因 #

employee.map is not a function的触发原因是employee状态的初始值设置错误：你在ListResults.js中将employee的初始值设为了空字符串""，而map是数组专属方法，字符串不支持该方法。组件首次渲染时Axios异步请求还未返回结果，会直接用初始空字符串传入EmpDetailsList执行map操作，直接触发报错。
另外还有一个隐性问题：你上层处理后传入EmpDetailsList的employee是纯字符串数组（每个元素为员工姓名），你代码中写的emp.id不存在，会导致key属性赋值无效。

修复方案 #

1. 修正状态初始值 #

将ListResults.js中employee的初始值改为空数组：

// 原错误写法
const [employee, setEmployee] = useState("");
// 修正后写法
const [employee, setEmployee] = useState([]);

2. 修正EmpDetailsList中的key属性和渲染格式 #

按照你预期的输出格式调整渲染逻辑，用索引或者员工姓名作为key即可：

const EmpDetailsList = ({ employee }) => {
  return (
    <Row>
      {employee.map((emp, index) => ( 
        <h5 key={index}>- Employee: {emp}</h5>
      ))}   
    </Row>
  );
};
export default EmpDetailsList;

可选优化：增加类型兜底判断 #

如果需要兼容异常场景下的报错，可在执行map前增加数组类型判断：

{Array.isArray(employee) && employee.map((emp, index) => (
  // 渲染逻辑
))}

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