2

He recibido un desarrollo en React para implementar una funcionalidad pero hay algo que me tiene detenido. En un componente de la aplicación se agrega un producto a un pedido, con unos datos de ese producto tales como img, cantidad, color y otros. Lo estoy llevando todo a un estado de ese componente, pero necesito que esa información se muestre en otro componente, que es de un nivel superior. No logro hacerlo. Dejo el código de la captura de los datos.

addToCart(imagen, nombre, ref, marca, color, talla, cantidad){
        this.setState({
            selectedProduct: {
                imagen: imagen,
                nombre: nombre,   //Descripcion
                ref: ref,       //Referencia
                marca:marca,    //nom_marca
                color: color,   // num_color, label_color
                talla: talla,   // label_talla
                cantidad: cantidad  //quantity
            }
        }, function(){
            this.handleAddToCart(this.state.selectedProduct);
        })
        this.setState({
            estado: "✔ ADDED"
        }, function(){
            setTimeout(() => {
                this.setState({ 
                    estado: "ADD TO CART",
                    selectedProduct: {} 
                });
            }, 5000);
        });
    }


    handleAddToCart(selectedProducts){
        let cartItem = this.state.cart;
        let productID = selectedProducts.ref;
        let productQty = selectedProducts.cantidad;
        if(this.checkProduct(productID)){
            console.log('hi');
            let index = cartItem.findIndex((x => x.id == productID));
            cartItem[index].cantidad = Number(cartItem[index].cantidad) + Number(productQty);
            this.setState({
                cart: cartItem
            })
        } else {
            console.log('this');
            cartItem.push(selectedProducts);
        }
        this.setState({
            cart : cartItem,
            cartBounce: true,
        });
        setTimeout(function(){
            this.setState({
                cartBounce:false,
                cantidad: 1
            });
            console.log(this.state.cantidad);
            console.log(this.state.cart);
    }.bind(this),1000);  
        this.sumTotalItems(this.state.cart);
    }

Estas son las dos funciones. Y esta es la manera como quiero usarlo en el otro componente:

export default class NavbarAdaptat extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showCart: false,
            cart: this.props.cartItems,
        };

....

handleCart(e){
        e.preventDefault();
        this.setState({
            showCart: !this.state.showCart
        })
    }

    render() {
         let cartItems;
             cartItems = this.state.cart.map(product =>{
                 return(
                     <li className="cart-item" key={product.name}>
                         <img className="product-image" src={product.image} />
                         <div className="product-info">
                             <p className="product-name">{product.name}</p>
                             <p className="product-price">{product.price}</p>
                         </div>
                         <div className="product-total">
                             <p className="quantity">{product.quantity} {product.quantity > 1 ?"Nos." : "No." } </p>
                             <p className="amount">{product.quantity * product.price}</p>
                         </div>
                         <a className="product-remove" href="#" onClick={this.props.removeProduct.bind(this, product.id)}>×</a>
                     </li>
                 )
             });
             let view;
             if(cartItems.length <= 0){
                 view = <EmptyCart />
             } else{
                 view = <CSSTransitionGroup transitionName="fadeIn" transitionEnterTimeout={500} transitionLeaveTimeout={300} component="ul" className="cart-items">{cartItems}</CSSTransitionGroup>
             }

y finalmente muestro el {view} Pero el cart: this.props.cartItems es mi problema, porque creo que cart Items no se está llenando en ninguna parte y no sé cómo hacerlo. Agradezco mucho su ayuda

1 respuesta 1

2

Para compartir el estado entre componentes de React tienes 2 opciones.

  1. Utilizar un state manager como MobX o Redux - aunque si estás aprendiendo React apenas, no creo te recomiendo tocar esos temas ya que son un poco avanzados.

  2. Utilizar un componente padre que tenga el estado que quieres compartir y luego lo pase a sus hijos via props.

Acá tienes un ejemplo

https://codesandbox.io/s/0n00r3o2v

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center'
};

const ChildOne = ({ updateSum }) => {
  return <button onClick={updateSum}>Sum</button>;
};

const ChildTwo = ({ sum }) => {
  return <h1>The sum is: {sum}</h1>;
};

class Parent extends React.Component {
  state = {
    sum: 0
  };

  updateSum = () => {
    this.setState(prevState => ({
      sum: prevState.sum + 1
    }));
  };

  render() {
    return (
      <div>
        <ChildOne updateSum={this.updateSum} />
        <ChildTwo sum={this.state.sum} />
      </div>
    );
  }
}

const App = () => (
  <div style={styles}>
    <Parent />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.