Я знаю, что эта ошибка была опубликована много раз, но ни одно из исправлений не помогло мне. И я застрял с ним в течение недели ...
Я учусь реагировать в свободное время и хочу создать веб-страницу, которая принимает объект json, перебирает его, чтобы заполнить карточки и возвращает карты. Это сделано в компоненте, который я импортирую на главную страницу. Вот ошибка:
Uncaught Error: Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы могли смешать импорт по умолчанию и с именами. Проверьте метод визуализации Dashboard.
import React from 'react';
import { CardHeader, Card } from "@material-ui/core";
import render from "react-dom";
export default function CardComponent() {
let bedpressJSONObject = {
bedpress: {
"0": {
bedriftsnavn: "hei",
dato: "24.12.12",
info: "asdasdsadas"
},
"1": {
bedriftsnavn: "på",
dato: "14.05.22",
info: "gfdsgdfsbvfbvsrgf"
},
"2": {
bedriftsnavn: "dei",
dato: "15.2.12",
info: "243wresdfvxzgbtr"
}
}
};
let cardList = [];
Object.keys(bedpressJSONObject.bedpress).forEach(index => {
let card = bedpressJSONObject.bedpress[index];
console.log(card.dato)
cardList.push(
<Card>
<CardHeader
title={card.bedriftsnavn}
subtitle={card.dato}
actAsExpander={true}
showExpandableButton={true}
/>
<p>{card.info}</p>
</Card>
);
});
{
return (
<div className="card-list">
{cardList}
</div>
);
}
}
И вот главная страница:
import AppBar from "@material-ui/core/AppBar";
import { makeStyles } from "@material-ui/core/styles";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import "bootstrap/dist/css/bootstrap.min.css";
import React from "react";
import {CardComponent} from "../Components/CardsComponent";
import {DropdownMenu} from "../Components/DropdownComponent";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1
},
menuButton: {
marginRight: theme.spacing(2)
}
}));
export default function Dashboard() {
const classes = useStyles();
return (
<div className={classes.root}>
<div>
<AppBar position="static" style={{ backgroundColor: "#182b36" }}>
<Toolbar variant="dense">
<DropdownMenu />
<Typography variant="h6" color="inherit">
Dashboard
</Typography>
</Toolbar>
</AppBar>
</div>
<CardComponent/>
</div>
);
}
Любая помощь или советы будут с благодарностью!