嘗試使用 JSON 數據填充卡片時，獲取元素類型無效錯誤

Question

我知道這個錯誤已經發布了很多次，但沒有一個修復對我有用。 我已經堅持了一個星期了......

我在業余時間學習反應，我想制作一個網頁，它接受一個 json 對象，遍歷它來填充卡片，然后返回卡片。 這是在我導入到主頁的組件中制作的。 這是錯誤：

未捕獲的錯誤：元素類型無效：應為字符串（對於內置組件）或類/函數（對於復合組件）但得到：未定義。 您可能忘記從定義組件的文件中導出組件，或者您可能混淆了默認導入和命名導入。 檢查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>
  );
}

任何幫助或提示將不勝感激！

Answer 1

而不是import {CardComponent} from "../Components/CardsComponent"; 使用import CardComponent from "../Components/CardsComponent";

您在 CardComponent.js 中使用export default和未命名導出

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export