我对 react 很陌生，并尝试从 .json 文件(称为 userData.json)获取数据，但即使 userData 是一个数组，.map 也不起作用。
我已经通过这样做检查了这一点
console.log(Array.isArray(userData));
console.log(typeof userData);
它返回“true”和“object”。
知道我做错了什么吗？ 这是完整的代码片段:
import React from "react";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
class JsonTable extends React.Component {
constructor(props) {
super(props);
this.state = {
userData: [],
error: undefined
};
}
componentDidMount() {
fetch("../data/userData.json").then(
result => {
this.setState({
userData: result
});
},
error => {
this.setState({ error });
}
);
}
render() {
const { userData } = this.state;
console.log(Array.isArray(userData));
console.log(typeof userData);
return (
<Paper>
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Foto</TableCell>
<TableCell>Kategorie</TableCell>
<TableCell>Kontaktinformation</TableCell>
<TableCell>Job</TableCell>
<TableCell>Notiz</TableCell>
</TableRow>
</TableHead>
<TableBody>
{userData.map(row => {
return (
<TableRow key={row.id}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell>{row.image}</TableCell>
<TableCell>{row.category}</TableCell>
<TableCell>{row.contactInfo}</TableCell>
<TableCell>{row.job}</TableCell>
<TableCell>{row.note}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Paper>
);
}
}
export default JsonTable;
最佳答案
but .map is not working even though userData is an array.
没有。 render() 被调用两次。第一次渲染初始状态时，userData 是一个空数组，您得出的结论是 userData 是一个数组。这次，映射不会失败。现在数据已获取，您可以使用 userData 作为响应对象来调用 setState(这就是 fetch() 解析的内容)，这一次， Array.isArray 将返回 false (但不知何故你没有看到)，并且 .map 不存在。
要解析 fetch 调用的结果并获取数组，请使用 .json():
fetch("../data/userData.json")
.then(res => res.json())
.then(result => /*...*/)
关于javascript - TypeError : userData. 即使 userData 是一个数组， map 也不是一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53682807/