¡He encontrado un problema que no puede encontrar una solución en react-redux! Tengo una función que reside en el componente secundario: "onClick={() => addToCart(product)}" Cada vez que hago clic en el botón de la interfaz de usuario de la aplicación, aparece un error que dice: "TypeError: addToCart no es una función". . He intentado varias soluciones, pero en vano: Código del componente principal:
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".Componente Lista de productos:
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;```index.js consta del siguiente código:
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") );