Pasando la función del componente secundario al principal en react-redux

0

¡Me he encontrado con un problema que no puedo encontrar una solución en react-redux! Tengo una función que vive en el componente Child: "onClick = {() => addToCart (product)}" Cada vez que hago clic en el botón en 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".
6
  • ¿Has olvidado agregar 'accesorios'? Para que tenga this.props.addToCart de la siguiente manera: {<ProductList addToCart = {this.props.addToCart} ... />}
    mdebeus
    13 de oct a las 16:38
  • @mdbeus Hice lo que dijiste, ¡pero el error persiste! Supongo que me pierdo algo en el flujo: ¡también publicaré mi ProductList! 13 oct a las 17:20
  • Tengo una respuesta a un problema similar en otro lugar, Cómo establecer el estado de un componente desde otro componente en React , ¡espero que esto ayude! 13 de oct a las 17:23
  • @ HoldOffHunger Leí su publicación sobre el estado, sin embargo, le agradecería que en lugar de cambiar el estado a través de los componentes me dirijan a las funciones. ¡Gracias! 13 oct a las 17:40
  • Me gustaría señalar que mi aplicación no tiene el flujo normal: index.js -> Aplicación -> "Componentes". Debido a que soy nuevo en redux-react, también publicaré mi index.js, ¡porque podría cometer un error al envolver con <Provider> todo el proyecto! 13 de oct a las 17:51
0

Componente ProductList:

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;```
1
  • @ Harun Diluka Heshan Tuve la opinión de que publiqué mucho más que información esencial. ¡Estoy trabajando con recat-redux en un proyecto de eshop y me gustaría agregar funcionalidad al botón addToCart! ¿Debo publicar mis reductores, acciones, etc.? 13 oct a las 19:06
0

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")
);