React使用axios拉取API数据调用language.map报not a function错误求助

错误原因 #

• TypeError: language.map is not a function 报错的核心原因是调用map方法的language变量不是数组类型：你初始化时给的是空数组没错，但接口返回的res.data是对象类型，赋值后language就变成了对象，自然没有数组的map方法。
• 你把language套进方括号写[language].map()时，相当于强行把非数组的language包成了长度为1的数组，所以不会报错，但数组里的项不是你要遍历的语言列表，自然渲染不出任何内容。

修复方案 #

1. 你代码中已经打印了res.data，查看控制台打印内容可以发现，接口返回的res.data是一个外层对象，真正的语言列表数组存在该对象的data字段中。
2. 修改axios请求成功后的赋值逻辑，把setLanguage(res.data)改为setLanguage(res.data.data)即可。
3. 可选优化：渲染前增加可选链判断，避免接口异常时再次出现报错，把map调用改为language?.map()。

修改后关键代码片段 #

接口请求部分 #

axios
  .get(
    "https://omxdgcc23c.execute-api.ap-south-1.amazonaws.com/dev/api/misc/languages?userId=0x60588910"
  )
  .then((res) => {
    console.log(res.data);
    // 取res.data.data才是目标语言数组
    setLanguage(res.data.data);
  })
  .catch((err) => {
    console.log(err);
  });

列表渲染部分 #

{language?.map((languages) => {
  return (
    <TableRow key={languages.id}>
      <TableCell component="th" scope="row">
        {languages.uid}
      </TableCell>
      <TableCell align="right">{languages.engText}</TableCell>
      <TableCell align="right">{languages.text}</TableCell>
      <TableCell align="right">{languages.category}</TableCell>
      <TableCell align="right">{languages.index}</TableCell>
      <TableCell align="right">{languages.code}</TableCell>
      <TableCell align="right">{languages.createdAt}</TableCell>
      <TableCell align="right">{languages.updatedAt}</TableCell>
    </TableRow>
  );
})}

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