React页面空白无渲染 类组件车辆列表功能异常排查

页面空白是组件构造函数抛出运行时错误，导致React渲染进程直接中断，核心问题有三处：

• 错误访问不存在的实例属性：faker是直接从依赖包导入的顶层变量，并非组件实例this上挂载的属性，写this.faker会直接触发Cannot read properties of undefined报错
• 无效的bind调用：faker.vehicle.manufacturer()执行后返回的是字符串类型的厂商名，对字符串调用bind本身就会抛出类型错误，且这部分逻辑完全没有实际作用
• 循环导入隐患：两个文件存在双向导入问题，VehicleList.js导入了Vehicles，Vehicles.js又反向导入VehicleList，也可能引发模块加载异常。

1. 删除两个类组件构造函数里的全部错误代码，没有需要初始化的状态、绑定的自定义方法时，类组件可以省略constructor写法
2. 移除两个文件里互相导入的无用代码，理清组件层级：Vehicles作为父组件承载详情展示逻辑，VehicleList作为子组件承载列表渲染逻辑，只需要在父组件中导入子组件即可。
3. 优化重复的列表渲染逻辑，用循环生成10条车辆数据，替代手写10个重复的ListGroup.Item。

修正后代码 #

VehicleList.js #

import React from 'react'
import {faker} from '@faker-js/faker'
import ListGroup from 'react-bootstrap/ListGroup';

class VehicleList extends React.Component {
  render(){
    // 循环生成10条车辆数据
    const vehicleList = Array.from({ length: 10 }).map((_, index) => (
      <ListGroup.Item key={index}>
        {faker.vehicle.manufacturer()} {faker.vehicle.model()}
      </ListGroup.Item>
    ))

    return (
      <div style={{ display: 'block', width: 400, padding: 30 }}>
        <ListGroup>
          {vehicleList}
        </ListGroup>
      </div>
    );
  }
}

export default VehicleList

Vehicles.js #

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Card, Button} from 'react-bootstrap';
import {faker} from '@faker-js/faker'
import VehicleList from './VehicleList';

class Vehicles extends React.Component{
  render(){
    return(
      <div>
        <Card className="text-center">
          <Card.Body>
            <Card.Title>No Vehicle Selected</Card.Title>
            <Card.Text>
              Click a vehicle to see more details
            </Card.Text>
          </Card.Body>
        </Card>
        <br />
        {/* 后续实现点击交互时，在这里替换成选中车辆的详情即可 */}
        <Card style={{ width: '18rem' }}>
          <Card.Img variant="top" src={`https://via.placeholder.com/180x150?text=${faker.vehicle.manufacturer()} ${faker.vehicle.model()}`} />
          <Card.Body>
            <Card.Title>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</Card.Title>
            <Card.Text>
              This is a wonderful {faker.vehicle.fuel()}-powered {faker.vehicle.color()} {faker.vehicle.type()}.
            </Card.Text>
            <Button variant="primary">Buy now!</Button>
          </Card.Body>
        </Card>
        {/* 挂载车辆列表组件 */}
        <VehicleList />
      </div>
    )
  }
}

export default Vehicles

要完成点击车辆展示对应详情的功能，可以在Vehicles父组件的state中维护当前选中的车辆数据，把选中车辆的回调函数通过props传给VehicleList子组件，点击列表项时触发回调更新父组件state，即可动态渲染对应车辆的详情，不需要在两个组件间做双向导入。

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