React沒有在螢屏上顯示任何內容-有解無憂

我使用的是函式而不是類，并且代碼在一定程度上可以正常作業，現在它根本沒有顯示。

在我的 VehiclesList.js 中，我生成了 10 輛隨機車輛，代碼如下：

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

class VehicleList extends React.Component {
  constructor(props){
    super(props);
    this.manufacturer = this.faker.vehicle.manufacturer().bind(this)
  }

   render(){
   return (
    <div style={{ display: 'block', width: 400, padding: 30 }}>
        <ListGroup>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
      </ListGroup>
    </div>
  );
}
}

export default VehicleList

在我的vehicle.js中，我必須顯示點擊車輛的資訊，反應沒有在螢屏上顯示任何內容，此時我迷路了。

下面的代碼：

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

class Vehicles extends React.Component{
  constructor(props){
    super(props);
    this.manufacturer = this.faker.vehicle.manufacturer().bind(this)
  }
  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></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>
</div>
)
}
}


export default Vehicles

我真的很感激這方面的任何幫助。謝謝！

uj5u.com熱心網友回復：

將建構式中的行更改為this.manufacturer = this.faker.vehicle.manufacturer.bind(this);

或者完全洗掉它，this.manufacturer無論如何您都沒有在代碼中參考。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/493473.html

標籤：javascript 反应

上一篇：如何從前端上傳檔案并使用fs和express將其發布到本地檔案夾中

下一篇：合并多個JSON物件時出現問題