React点击菜单卡片后DishDetail组件渲染为null问题排查

错误定位与修复方法 #

错误1：RenderMenuItem组件参数引用错误 #

• 问题：定义RenderMenuItem函数时已经通过结构拿到了onClick参数，但函数内部依然调用不存在的props.onClick，导致点击事件触发失败，selectedDish状态始终没有更新，保持初始值null。
• 修复代码：

function RenderMenuItem({ dish, onClick }) {
    return(
        <Card key={dish.id}
            // 把props.onClick改成直接用解构出来的onClick
            onClick={() => onClick(dish.id)}>
                <CardImg width="100%" src={dish.image} alt={dish.name} />
              <CardImgOverlay>
                <CardTitle>{dish.name}</CardTitle>
              </CardImgOverlay>
        </Card>
    );
}

错误2：onDishSelect方法this指向丢失 #

• 问题：class组件里定义的普通方法onDishSelect在调用时this指向为undefined，执行this.setState会直接抛出错误，无法更新状态。
• 修复代码（改成箭头函数自动绑定this）：

//sets the state of the selected Dish
onDishSelect = (dishId) => {
  this.setState({ selectedDish: dishId});
}

错误3：DishDetail组件未传入comments参数 #

• 问题：调用DishDetail时只传了dish属性，RenderComments需要的comments属性没有传入，导致评论区始终显示null提示。另外用filter再取下标0的写法效率较低，推荐用find直接查找匹配项。
• 修复Main组件的render方法代码：

render() {
  // 提前查找选中的菜品，避免重复遍历数组
  const selectedDish = this.state.dishes.find(dish => dish.id === this.state.selectedDish)
  return (
    <div>
      <Navbar dark color="primary">
        <div className="container">
          <NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
        </div>
      </Navbar>
      <Menu dishes={this.state.dishes} onClick={(dishId) => this.onDishSelect(dishId)} />
      {/* 传入comments参数，用可选链避免初始状态为null时报错 */}
      <DishDetail dish={selectedDish} comments={selectedDish?.comments} />
    </div>
  );
}

完成以上三处修改后，点击菜单卡片即可正常加载对应的菜品信息和评论。

内容的提问来源于stack exchange，提问作者Vincent Thomason