这是我的组件,我在这里使用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;
发布于 2021-10-15 06:10:56
请参阅axios API接口这里,获取的数据也存储在data属性中,因此您必须像这样访问它:
axios.get('...').then(res => setLanguage(res.data.data));
发布于 2021-10-15 05: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>
);
})}
发布于 2021-10-15 07:03:30
api响应的格式如下:
{
"statusCode": 200,
"data": [
{...},
{...}
]
}
因此,在设置languages
时,需要保存响应的data
对象的data
属性。然后,setLanguage(_.get(res, 'data.data', []));
,languages
将始终是一个列表,您不需要在整个函数的其余部分检查它。
如果您想对一个糟糕的useEffect
响应执行一些错误处理,您可能需要检查您的api块中的响应。但现在这是在一个地方,而不是整个功能的其余部分。
https://stackoverflow.com/questions/69585312
复制相似问题