Я совершенно новичок, чтобы реагировать и пытаться получить данные из файла .json (называемого userData.json), но .map не работает, даже если userData является массивом.
Я уже проверил этоделает
console.log(Array.isArray(userData));
console.log(typeof userData);
и возвращает «истину» и «объект».
Есть идеи, что я делаю неправильно?Вот весь фрагмент кода:
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;