将数据传递给子组件在反应中不起作用

Question

<div class="row">
    <div class="col-6 collection">
      <img src="https://via.placeholder.com/150/771796">
      <div class="form">
        <label>Text</label>
        <div class="input-with-x"> <!-- <- new class used -->
        <input type="text" name="text2">
        <span>X</span>
        </div>
      </div>
    </div>
  </div>

我有一个onClick处理程序正在工作并将菜品详细信息发送到getDish函数。后者将数据作为道具传递给Cart组件。

但是它不起作用。当我进行console.log记录时，Dishdetail会显示在菜单组件中，但不会显示在购物车组件和未定义的错误中。

     ***Menucomponent.js***                 

处理onclick事件的功能

          <div className="row">
      {this.props.dishes.map((dish, index) => {
        return (
          <Card
            className="col-xl-2 col-lg-2 col-md-4 col-sm-6 m-3 text-white"
            style={{ height: "400px", backgroundColor: "#1A0301" }}
          >
            <CardBody>
              <CardTitle>{this.props.dishes[index].name}</CardTitle>

              <CardSubtitle></CardSubtitle>
            </CardBody>

      <img
              height="30%"
              src={this.props.dishes[index].image}
              alt={this.props.dishes[index].description}
            />

            <button className="bg-dark text-white mt-4 " width="100">
              <CardText>
                Serve for - {this.props.dishes[index].serving}
              </CardText>
            </button>
            <CardBody>
              <CardSubtitle>
                $$$ -{this.props.dishes[index].price}
              </CardSubtitle>
            </CardBody>
            <button
              className="text-white m-2 p-2 "
              style={{ backgroundColor: "#FDA50F" }}
              onClick={() => this.getDish(this.props.dishes[index])}
            >
              Order Now
            </button>
            <button
              className="text-white m-2 p-2 "
              style={{ backgroundColor: "#FDA50F" }}
            >
              <Link to="/cart" className="text-white">
                Check cart
              </Link>
            </button>
          </Card>

getDishId(dishdetail) { return ( <React.Fragment> <div className="container-fluid">{console.log(dishdetail.name)}</div> <Cart dishdetail={this.props.dishdetail} /> </React.Fragment> ); }

CartComponent.js