Question

我试图在React中建立购物车，我不使用redux，所以我认为这也是一个问题。我现在已经完成了最多的应用程序，因此我想以这种方式完成它而不使用redux。好的，出什么问题了。我做了一些将商品添加到购物车中的功能，但我不想在此组件中显示此产品，而是在标题的主要组件App中显示此产品。在组件计数器中，我创建了ShoppingCart组件来显示产品-但我只想将产品推送到ShoppingCart中，但将它们显示在组件App中。

我尝试了很多不同的方法，但是没有用。我可以显示产品，但实际上不在我想要的位置。我认为问题在于如何与组件之间的项目进行通讯。

这是我的柜台

import React, { Component } from "react";
import "./Counter";
import "./Counter.css";
import ShoppingCart from "./ShoppingCart";

class Counter extends Component {
  state = {
    availableProducts: 20,
    shoppingCart: 0,
    cart: []
  };

  handleRemoveFromCart = () => {
    this.setState({
      shoppingCart: this.state.shoppingCart - 1
    });
  };

  handleAddToCart = () => {
    this.setState({
      shoppingCart: this.state.shoppingCart + 1
    });
  };

  handleAddProductsToCart = props => {
    // console.log("clicked", this.props.name, this.state.shoppingCart)
    let found = false;
    const updateCart = this.state.cart.map(cartItem => {
      if (cartItem.name === this.props.name) {
        found = true;
        cartItem.productsNumber = this.state.shoppingCart;
        return cartItem;
      } else {
        return cartItem;
      }
    });
    if (!found) {
      updateCart.push({
        name: this.props.name,
        productsNumber: this.state.shoppingCart,
        key: this.props.name
      });
    }
    this.setState({
      cart: updateCart
    });
    // return <ShoppingCart cart={updateCart} />;
    // console.log(updateCart);
  };

  render() {
   const cart = this.state.cart.map(cartItem => (
     <ShoppingCart
        name={cartItem.name}
        productsNumber={cartItem.productsNumber}
        key={cartItem.key}
      />
    ));
    return (
      <>
        <div className="counter">
          <button
            className="buttonCount"
            disabled={this.state.shoppingCart === 0 ? true : false}
            onClick={this.handleRemoveFromCart}
          >-</button>
          <span> {this.state.shoppingCart} </span>
          <button
            className="buttonCount"
            disabled={
              this.state.shoppingCart === this.state.availableProducts
                ? true
                : false
            }
            onClick={this.handleAddToCart}
          >
            +
          </button>
          <button
            className="buy"
            disabled={this.state.shoppingCart <= 0 ? true : false}
            onClick={this.handleAddProductsToCart}
          >Add to cart</button>
        </div>
        <div>{cart}</div>

      </>
    );
  }
}

导出默认计数器；

这是购物

import React, {Component} from "react"
import "./ShoppingCart";
import "./ShoppingCart.css";

class ShoppingCart extends Component {

  render() {

      return (
        <>
        <div>{this.props.name}</div>
        <div>{this.props.productsNumber}</div>
        </>
      );
    }
  }


export default ShoppingCart;

如果您有任何建议，将有所帮助。谢谢。

Answer 1

import React, { Component } from "react";
import "./Counter";
import "./Counter.css";
import ShoppingCart from "./ShoppingCart";

class Counter extends Component {
  state = {
    availableProducts: 20,
    shoppingCart: 0,
    cart: []
  };

  handleRemoveFromCart = () => {
    this.setState({
      shoppingCart: this.state.shoppingCart - 1
    });
  };

  handleAddToCart = () => {
    this.setState({
      shoppingCart: this.state.shoppingCart + 1
    });
  };

  handleAddProductsToCart = props => {
    // console.log("clicked", this.props.name, this.state.shoppingCart)
    let found = false;
    const updateCart = this.state.cart.map(cartItem => {
      if (cartItem.name === this.props.name) {
        found = true;
        cartItem.productsNumber = this.state.shoppingCart;
        return cartItem;
      } else {
        return cartItem;
      }
    });
    if (!found) {
      updateCart.push({
        name: this.props.name,
        productsNumber: this.state.shoppingCart,
        key: this.props.name
      });
    }
    this.setState({
      cart: updateCart
    });
    // return <ShoppingCart cart={updateCart} />;
    // console.log(updateCart);
  };
CreateCard=(cartItem)=>{
console.log(cartItem)
     return(
          <ShoppingCart
             name={cartItem.name}
             productsNumber={cartItem.productsNumber}
             key={cartItem.key}
           />
     );
     }
  render() {
  
    return (
      <>
        <div className="counter">
          <button
            className="buttonCount"
            disabled={this.state.shoppingCart === 0 ? true : false}
            onClick={this.handleRemoveFromCart}
          >-</button>
          <span> {this.state.shoppingCart} </span>
          <button
            className="buttonCount"
            disabled={
              this.state.shoppingCart === this.state.availableProducts
                ? true
                : false
            }
            onClick={this.handleAddToCart}
          >
            +
          </button>
          <button
            className="buy"
            disabled={this.state.shoppingCart <= 0 ? true : false}
            onClick={this.handleAddProductsToCart}
          >Add to cart</button>
        </div>
        <div>{this.state.cart!=null?this.state.cart.map(cartItem => (this.CreateCard(cartItem))):""}</div>

      </>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.production.min.js"></script>

我认为最好创建一个函数并调用该函数希望对您有帮助

组件之间的连接React-购物车

1 个答案: