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";

您正在使用export default，而在CardComponent.js中未命名导出

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

尝试使用JSON数据填充卡时，获取元素类型无效错误

1 个答案: