在react-redux中将函数从子组件传递给父组件

Question

I have encouneterd a problem that cannot find a solution in react-redux! I have a function that lives on Child component: "onClick={() => addToCart(product)}" Everytime I click on the button on UI of the application an error pops up saying: "TypeError: addToCart is not a function" . I have tried several workarounds but in vain: Parent component code:

class Jeans extends Component {
  render () {
    return (
      <>
        <PanelHeader size="sm" />
        <ProductList 
          addToCart = {this.addToCart}
          products={jeans}
          image={jeans1}
          header='Jeans For Men'
          description='Foundation Of Contemporary Wardrobes, 
          Whether Tailored Or Super Skinny, Straight or Slim, 
          Biker or Destroyed, Our Denim Collection Caters To 
          Every Style And Silhouette.'
        />
      </>
      );
    }
  }


const mapStateToProps = (state)=> {
  return {
      products: state.products
       }
  }

const mapDispatchToProps = (dispatch) => {
      return {
        addToCart: (id) => {dispatch(addToCart(id))}
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Jeans);```
and Child component where the function lives:


```class ProductCard extends Component {
  render() {
    const {image, product, key, addToCart} = this.props
    return (
      <Col
        lg={4}
        md={6}
        sm={6}
        xs={12}
        className="font-icon-list"
        key={key}
      ><Card>
        <CardImg img src={image} alt="product"/>
          <CardBody>
            <CardTitle className='d-inline align-middle text-danger'>{product.title}</CardTitle>
            <CardTitle className='d-inline align-middle float-right h5'><strong>{product.price}</strong></CardTitle>
            <CardText className='my-2'>{product.description}</CardText>
            <Button>
              <div className="col-md-12 text-center">
                <div className="buttons d-flex flex-row">
                  <div className="cart"><i className="fa fa-shopping-cart"></i>
                    </div> 
                  <button onClick={() => addToCart(product)} className="btn btn-success cart-button px-5">Add to Cart</button>
                </div>
              </div>
            </Button>
          </CardBody>
        </Card>
      </Col>
    )
  }
}

export default ProductCard```

**Thank you in advance for your time reviewing my question!**

There is an intermediate component between Parent (Jeans) and Child (Productcard) called (Productlist) so the order goes: "Jeans" --> "ProductList" --> "ProductCard".

Answer 1

ProductList component:

const ProductList = ({products, header, description, image, addToCart}) => {
  return (
    <div className="content">
        <Row>
          <Col md={12}>
            <Card>
              <CardHeader>
                <h5 className="title">{header}</h5>
                <p className="category">{description}</p>
              </CardHeader>
              <CardBody className="all-icons">
                <Row>
                  {products.map((product, key) => {
                    return (
                      <ProductCard 
                        addToCart = {addToCart}
                        key={key} 
                        product={product} 
                        image={image}
                      />
                    );
                  })}
                </Row>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>  
      );
    }
    
export default ProductList;```

Answer 2

index.js consists of the following code:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.css";
import "assets/scss/now-ui-dashboard.scss?v1.5.0";
import "assets/css/demo.css";
import { Provider } from "react-redux";
import AdminLayout from "layouts/Admin.js";

import store from "./redux/store"

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route path="/admin" render={(props) => <AdminLayout {...props} />} />
        <Redirect to="/admin/dashboard" />
      </Switch>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);