当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。组件{

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>
);