React onClick触发后Vehicles组件未渲染选中数据的解决方法

核心故障点 #

点击列表项后详情区不更新的直接原因是：App组件渲染Vehicles组件时，没有将存储选中车辆的state作为props传入。
Vehicles组件内部依赖this.props.oneVehicle判断渲染逻辑，但App的render方法里写的是无任何传参的<Vehicles />，导致组件内的oneVehicle值永远是undefined，始终命中null判断分支，渲染"未选中车辆"的提示。

排查路径 #

• 先验证状态更新链路：目前列表点击高亮正常，说明从点击事件触发、handleVehicleSelected执行到setState更新selected值的全链路是正常的，状态本身没有问题
• 再验证props传递链路：对照Vehicles组件声明的prop要求，逐层检查父组件传值，就能发现Vehicles组件没有拿到任何传入的车辆数据
• 额外冗余点：VehicleList中给onClick重复调用.bind(this, vehicle)属于不必要写法，传入的回调已经在App构造函数中绑定过上下文，重复bind会导致每次渲染生成新的函数引用，虽然不影响功能，但会带来无意义的性能开销

修复代码 #

1. 修改App.js中Vehicles组件的渲染逻辑，传入选中车辆数据：

// App.js render方法内的布局部分
<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}
  />
  {/* 新增oneVehicle属性，将选中状态传入详情组件 */}
  <Vehicles oneVehicle={this.state.selected} />
</Stack>

2. （可选优化）简化VehicleList中的事件绑定写法：

// VehicleList.js oneItem方法内的列表项
<ListGroup.Item 
  action 
  active={this.props.selected === vehicle} 
  onClick={() => this.props.onVehicleSelected(vehicle)}
>
  {vehicle.manufacturer} {vehicle.model}
</ListGroup.Item>

修改完成后，点击列表项时App的selected状态更新，会同步触发Vehicles组件接收到新的prop并重渲染，即可正常展示对应车辆的详情内容。

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