Javascript 在父级中单击后更新react中的组件

我开始学习react，所以我仍然掌握了一些概念，现在我正在做一些事情，需要在父组件中选择一个组件之后更新/渲染一个组件，我已经阅读了提升状态的相关内容，但是我所做的事情不起作用，我不知道我可能做错了什么

第一个组件父级：

  constructor(props) {
    super(props);
    this.state = { selectedDish: null, }
    this.onDishSelect = this.onDishSelect.bind(this);
  }

  onDishSelect(selectedDish) {
    this.setState({ selectedDish });
  }

  render() {
    const menu = this.props.dishes.map((dish) => {
      return (
        <div className="col-12 col-md-5 m-1">
          <Card key={dish.id}
            onClick={() => this.onDishSelect(dish)}>
            <CardImg width="100%" src={dish.image} alt={dish.name} />
            <CardImgOverlay>
              <CardTitle>{dish.name}</CardTitle>
            </CardImgOverlay>
          </Card>
        </div>
      );
    });

    return (
      <div className="container">
        <div className="row">
          {menu}
        </div>
        <DishDetail onClick={this.onDishSelect} />
      </div>
    );
  }
}

export default Menu;

建造师（道具）{
超级（道具）；
this.state={selectedDish:null，}
this.onDishSelect=this.onDishSelect.bind（this）；
}
onDishSelect（selectedDish）{
this.setState（{selectedDish}）；
}
render（）{
const menu=this.props.disks.map（（dish）=>{
返回(
这个.onDishSelect（dish）}>
{dish.name}
);
});
返回(
{menu}
);
}
}
导出默认菜单；

那孩子呢

export default class DishDetail extends Component {

  constructor(props) {
    super(props);
    this.state = { selectedDish: null }
    this.renderDish = this.renderDish.bind(this);
  }

  renderDish(dish) {
    if (dish != null)
      return (
        <Card>
          <CardImg top src={dish.image} alt={dish.name} />
          <CardBody>
            <CardTitle>{dish.name}</CardTitle>
            <CardText>{dish.description}</CardText>
          </CardBody>
        </Card>
      );
    else
      return (
        <div></div>
      );
  }

  render() {
    return (
      <div className="row">
        <div className="col-12 col-md-5 m-1">
          {this.renderDish(this.props.selectedDish)}
        </div>
      </div>
    )
  }

}

导出默认类DishDetail扩展组件{
建造师（道具）{
超级（道具）；
this.state={selectedDish:null}
this.renderDish=this.renderDish.bind（this）；
}
renderDish（碟形）{
if（dish！=null）
返回(
{dish.name}
{dish.description}
);
其他的
返回(
);
}
render（）{
返回(
{this.renderDish（this.props.selectedDish）}
)
}
}

当我运行它时，我可以看到菜单中的卡片，其想法是当我从菜单中单击一个组件时，我可以看到另一张卡片中的详细信息，但它没有更新，细节组件没有显示/显示/渲染

---

如果你知道我做错了什么或遗漏了什么，请提前感谢。

dishdeail

应该接受一个名为

Dish

的

道具。它不应该有任何状态

//父渲染函数
const{selectedDish}=this.state；
返回(
{menu}
{selectedDish&&}
);
//洗碗细节
类细节扩展组件{
render（）{
返回(
{/*使用this.props.dish的一些jsx*/}
)
}
}

为了保持简单，您甚至可以将
dishdeail
设置为函数而不是类：

export const dishdestail=（{dish}）=>(
{/*一些带dish的jsx*/}
);
您的错误是将onClick传递给dishdealture组件，您应该将selectedDish传递给dishdealture组件

父组件


建造师（道具）{
超级（道具）；
this.state={selectedDish:null，}
this.onDishSelect=this.onDishSelect.bind（this）；
}
onDishSelect（selectedDish）{
this.setState（{selectedDish}）；
}
render（）{
const menu=this.props.disks.map（（dish）=>{
返回(
这个.onDishSelect（dish）}>
{dish.name}
);
});
返回(
{menu}
//在此处添加selectedDish
);
}
}