TypeError:当使用axios获取数据时，language.map不是一个函数
TypeError:当使用axios获取数据时，language.map不是一个函数
提问于 2021-10-15 13:15:00
这是我的组件，我在这里使用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;回答 3
Stack Overflow用户
发布于 2021-10-15 14:10:56
请参阅axios API接口这里，获取的数据也存储在data属性中，因此您必须像这样访问它：
axios.get('...').then(res => setLanguage(res.data.data));Stack Overflow用户
发布于 2021-10-15 13:22:28
检查语言状态的长度，如果只有映射语言数组之后它大于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>
);
})}Stack Overflow用户
发布于 2021-10-15 15:03:30
api响应的格式如下：
{
"statusCode": 200,
"data": [
{...},
{...}
]
}因此，在设置languages时，需要保存响应的data对象的data属性。然后，setLanguage(_.get(res, 'data.data', []));，languages将始终是一个列表，您不需要在整个函数的其余部分检查它。
如果您想对一个糟糕的useEffect响应执行一些错误处理，您可能需要检查您的api块中的响应。但现在这是在一个地方，而不是整个功能的其余部分。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69585312
复制相关文章
相似问题
腾讯云开发者
