为什么我不能在 JSX 中导入这个 CardList？

Question

我正在做关于 React 的作业。

我正在尝试将卡片添加到页面中，并创建了一个Card.jsx和一个CardList.jsx文件来实现这一点。 我使用faker者来帮助生成一些随机的虚假信息。 但是，当我将CardList.jsx导入App.js文件并运行它时，我只看到浏览器上的 while 页面。 我只是不知道为什么，我和老师给的几乎一样。

请帮我！

以下是代码：

Card.jsx ：

import React from "react";

const Card = (props) => {
  return (
    <div>
      <img src={props.avatar} alt="food" />
      <h3>{props.article_name}</h3>
      <p>{props.description}</p>
      <h4>{props.author_name}</h4>
    </div>
  )
}

export default Card

CardList.jsx

import React from "react";
import Card from './Card'
import { faker } from '@faker-js/faker'

const CardList = () => {
  return (
    <div>
      <Card
        avatar={faker.image.fashion()}
        article_name={faker.definitions.title()}
        description={faker.lorem.paragraph()}
        author_name={faker.name.firstName + ' ' + faker.name.lastName} 
      />
    </div>
  )
}

export default CardList

App.js

import './App.css';
import CardList from './CardList'

function App() {
  return (
    <div className="App">
      <CardList />
    </div>
  );
}

export default App;

vs代码概述

Answer 1

在您的 CardList.jsx 中将代码更改为：

<div>
   <Card
        avatar = {faker.image.fashion()}
        article_name = {faker.definitions.title}
        description = {faker.lorem.paragraph()}
        author_name = {faker.name.firstName() + ' ' + faker.name.lastName()} 
    />
</div>

由于 faker.definitions.title 不是 function。 如果您打开浏览器控制台，您将看到一条错误消息。请确保通过阅读文档将函数编写为函数，将变量编写为变量。

Answer 2

firstName 和 lastName 是函数，因此它们需要括号https://fakerjs.dev/api/name.html

查看文档，faker.definitions.title 不存在，因此您需要为 article_name 使用其他类型的日期

<div>
      <Card
        avatar={faker.image.fashion()}
        article_name={faker.commerce.productName()} //using this as an example. replace with what you want
        description={faker.lorem.paragraph()}
        author_name={faker.name.firstName() + ' ' + faker.name.lastName()} 
      />
</div>