为何无法在JSX中导入CardList？React作业页面空白求助

你的页面空白是因为代码中faker API调用错误，导致组件渲染失败，具体错误点如下：

• faker.definitions.title() 不是有效的faker API，faker没有definitions.title()这个方法，应替换为faker.lorem.title()来生成随机标题。
• faker.name.firstName 和 faker.name.lastName 是方法，必须加括号调用（faker.name.firstName()、faker.name.lastName()），否则传递给组件的是函数本身的代码字符串，而非生成的随机名字。

修正后的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.lorem.title()}
        description={faker.lorem.paragraph()}
        author_name={`${faker.name.firstName()} ${faker.name.lastName()}`} 
      />
    </div>
  )
}

export default CardList

另外，排查React页面空白问题时，优先打开浏览器开发者工具（快捷键F12）查看控制台报错信息，能快速定位代码中的问题。

内容的提问来源于stack exchange，提问作者Wonster