TypeError：使用axios获取数据时language.map不是函数

Posted 2023-02-22

【中文标题】TypeError：使用axios获取数据时language.map不是函数

【英文标题】：TypeError: language.map is not a function when getting data using axios

【发布时间】：2021-12-03 16:38:19

【问题描述】：

这是我的组件，我将 MUI 用于表格。我正在从 API 获取数据，并且我还使用 map 方法来获取我的数据，但我收到错误消息：

TypeError: language.map is not a function

但是根据我的说法，当将语言放在正方形时，它不会出错，但也不会在 UI 上显示任何数据，我的代码是正确的，谁能帮助我。

Language.js

import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import axios from "axios";
import  useState, useEffect  from "react";

const Languages = () => 
const [language, setLanguage] = useState([]);

useEffect(() => 
axios
  .get(
    "https://omxdgcc23c.execute-api.ap-south-1.amazonaws.com/dev/api/misc/languages? 
 userId=0x60588910"
  )
  .then((res) => 
    console.log(res.data);
    setLanguage(res.data);
  )
  .catch((err) => 
    console.log(err);
  );
 , []);

 return (
<div>
  <h1>Languages</h1>

  <TableContainer component=Paper>
    <Table sx= minWidth: 650  size="small" aria-label="a dense table">
      <TableHead>
        <TableRow>
          <TableCell>Id</TableCell>
          <TableCell align="right">English Text</TableCell>
          <TableCell align="right"> Text</TableCell>
          <TableCell align="right">Category</TableCell>
          <TableCell align="right">Order Index</TableCell>
          <TableCell align="right">Language Code</TableCell>
          <TableCell align="right">Created Time</TableCell>
          <TableCell align="right">Updated Time</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        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>
          );
        )
      </TableBody>
    </Table>
  </TableContainer>
</div>
 );
 ;
  export default Languages;

【问题讨论】：

尝试用[ ...language ].map替换language.map。

【参考方案1】：

检查语言状态的长度，如果大于0只能映射语言数组，

请检查以下代码，

 language && language.length > 0 && 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>
          );
 )

【讨论】：

非常感谢它首先工作我从 [...language] 替换语言然后我做了这个 axios.get('...').then(res => setLanguage(res.data .data));

【参考方案2】：

看这里的axiosAPI，获取到的数据也存放在data属性中，所以你要这样访问：

axios.get('...').then(res => setLanguage(res.data.data));

【参考方案3】：

api 响应的格式为：

  "statusCode": 200,
  "data": [
    ...,
    ... 
  ]

所以在设置languages 时，您需要保存响应的data 对象的data 属性。 setLanguage(_.get(res, 'data.data', [])); 然后，languages 将始终是一个列表，您无需在函数的其余部分检查它。

如果您想针对错误的 api 响应进行一些错误处理，您可能需要检查 useEffect 块中的响应。但这现在是在一个地方，而不是整个函数的其余部分。