為什么我不能在 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>