當 onClick 事件發生時，React 沒有呈現信息

Question

我正在嘗試使用來自另一個模塊的信息更新 div。 這是需要呈現信息的名為 Vehicles.js 的文件：（我省略了所有導入以節省空間）

class Vehicles extends React.Component{
  render(){
    if (this.props.oneVehicle == null) {
      return (
        <>
        <Card className="w-40 align-self-start">
            <Card.Body>
              <Card.Title>No Vehicle Selected</Card.Title>
              <Card.Text>
                Click a vehicle on the left to see more details
              </Card.Text>
            </Card.Body>
        </Card>
        </>
      )
    } else {
     let { manufacturer, model, fuel, type, color, vin} = this.props.oneVehicle
     return(
      <div style={{ display: 'block', width: 400, padding: 30 }}>
          <Card className="w-50 align-self-start">
            <Card.Img variant="top" src={`https://via.placeholder.com/180x150?text=${manufacturer}${model}`} />
              <Card.Body>
                  <Card.Title>{manufacturer} {model}</Card.Title>
                  <Card.Subtitle className="mb-2 text-muted">{vin}</Card.Subtitle>
                  <Card.Text>
                  This is a wonderful {fuel}-powered {color} {type}.
                  </Card.Text>
                  <Button>Buy Now!</Button>
              </Card.Body>
          </Card>
      </div>
     )
    }
  }
}

export default Vehicles

這是我的 app.js：
類 App 擴展 React.Component {

  constructor(props){
    super(props);
    this.state = {
      vehicles: this.generateVehicles(),
      selected: null
    }

    this.handleVehicleSelected = this.handleVehicleSelected.bind(this)

  }

    generateVehicles() {
      let vehicles = []
      for (let i = 0; i < 10; i++) {
        vehicles.push({
          manufacturer: faker.vehicle.manufacturer(),
          model: faker.vehicle.model(),
          type: faker.vehicle.type(),
          fuel: faker.vehicle.fuel(),
          vin: faker.vehicle.vin(),
          color: faker.vehicle.color()
        })
      }

      return vehicles;
  }

  handleVehicleSelected(vehicle) {
    this.setState({ selected: vehicle })
  }

  render() {
    return (
    <Stack gap={3} direction="horizontal" className="p-5 col-md-10 offset-md-1">
      <VehicleList vehicles={this.state.vehicles} onVehicleSelected={this.handleVehicleSelected} 
      selected={this.state.selected}/>
      <Vehicles />
    </Stack>
  );
}
}

export default App

這是生成車輛的地方：

class VehicleList extends React.Component {
  oneItem(vehicle) {
    return (
    <div style={{ display: 'block', width: 400 }}>
        <ListGroup>
        <ListGroup.Item action active={this.props.selected === vehicle} 
          onClick={this.props.onVehicleSelected.bind(this, vehicle)}>
          {vehicle.manufacturer} {vehicle.model}
        </ListGroup.Item>
        </ListGroup>
    </div>
    )
  }

  render(){
    return (
      <ListGroup>
        {this.props.vehicles.map((v) => this.oneItem(v))}
      </ListGroup>
  );
  }
}

export default VehicleList

一切正常，但 Vehicles.js 部分中的 div 更新。 任何提示我如何解決這個問題？

Answer 1

我認為您忘記將道具oneVehicle傳遞給<Vehicles />

<Vehicles oneVehicle={this.state.selected}/>

這將有助於使用所選車輛重新渲染您的Vehicles組件

  render() {
    return (
    <Stack gap={3} direction="horizontal" className="p-5 col-md-10 offset-md-1">
      <VehicleList vehicles={this.state.vehicles} onVehicleSelected={this.handleVehicleSelected} 
      selected={this.state.selected}/>
      <Vehicles oneVehicle={this.state.selected}/>
    </Stack>
  );