我在reactjs中的购物卡遇到问题吗？

Question

这是App.js

import React from "react";
import ListProduct from "./listProduct";
import ListOrder from "./listOrder";
import pizza from "./pizza.jpg";
import './style.css'
import { Container,Row,Col,Button } from 'react-bootstrap';
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      total: 0,
      count: 0,
      products: [
        { id: 0, name: "Cold cuts", price: 5, value: 0, src: pizza },
        { id: 1, name: "Pepperoni", price: 3.5, value: 0, src: pizza },
        { id: 2, name: "Feta", price: 2.5, value: 0, src: pizza },
        { id: 3, name: "Mozzarella", price: 1.5, value: 0, src: pizza },
        { id: 4, name: "Swiss cheese", price: 1.5, value: 0, src: pizza },
        { id: 5, name: "Spices", price: 0.5, value: 0, src: pizza },
        { id: 6, name: "Vegetable", price: 0.5, value: 0, src: pizza },
      ],
      foodsOrder: [],
    };
  }
  handleIncrement = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };
  render() {
    return (
      <Container >
        <Row>
          <Col xs = {8}>
              <ListOrder />
          </Col>
          <Col className = 'item'>
            <Row className = 'header'>
              <span>Your pizza : </span>
              <span>$</span>
              <Button variant = 'warning'>Reset Pizza</Button>
            </Row>
            <ListProduct
              count={this.state.count}
              handleIncrement={this.handleIncrement}
              products = {this.state.products}
            />
          </Col>  
        </Row>
      </Container>
    );
  }
}
export default App;

这是listProduct.js

import React, { Component } from "react";
import Item from "./Item";
import {Row,Button} from 'react-bootstrap';
class ListProduct extends React.Component {
    render() {
    const {handleIncrement,count,products} = this.props
    return (
      <>

       {products.map(product =>  <Item key = {`${product.id}`} {...product}
          handleIncrement={handleIncrement}
          count={count}
        />)
       }
      </>
    );
  }
}

export default ListProduct;

这是Item.js

import React from 'react'
import ListProduct from './listProduct';
import {Row,Col,Button,Badge } from 'react-bootstrap';
class Item extends React.Component{
    render(){
            const {id,name,price,value,pizza} = this.props
            const {handleIncrement,count} = this.props
        return (
        <>
        <Row className = 'item'>
            <Col className = 'information'>
                <p>{name}</p>
                <p>{`${price} $`}</p>   
            </Col>
            <Col className = 'button'>
                <Button className = 'add' variant = 'success' onClick = {() => {handleIncrement(id)}} >+</Button>
                <Badge>{count}</Badge>
                <Button className = 'delete' variant="danger">-</Button>
            </Col>
        </Row>
        </>
        )
    }
}
export default Item;

[当我单击按钮中的事件hanldeInCrement时，类App中的所有变量this.state.count随着图片的增加而增加。我正在尝试另一种方式，但没有

我想当我单击仅聚焦按钮执行的按钮时。帮我。非常感谢.......................................................

Answer 1

您要将计数传递给子组件，这就是问题所在。您必须确定数组中的值并在此处打印值。因为计数是普遍的。计数不适用于状态中的特定项目。

 <Button className = 'add' variant = 'success' onClick = {() => {handleIncrement(id)}} >+</Button>
                <Badge>{value}</Badge>
                <Button className = 'delete' variant="danger">-</Button>

Answer 2

您只存储一种产品。由于状态存储在App组件中，因此只有一个计数。状态是一个全局对象，并且对于列表中的每个产品都不独立。您将需要在App组件中存储计数列表并像这样进行更新，或者为每个列表项指定其自己的状态以跟踪其自身的计数。

Answer 3

您总共使用count。

我认为这不是您想要的。

如果要对每种产品进行加总，则应将每种产品的计数分开。

constructor() {
    super();
    this.state = {
      total: 0,
      count: 0,  // I think it doesn't need.
      products: [
        { id: 0, count: 0, name: "Cold cuts", price: 5, value: 0, src: pizza },
        { id: 1, count: 0, name: "Pepperoni", price: 3.5, value: 0, src: pizza },
        { id: 2, count: 0, name: "Feta", price: 2.5, value: 0, src: pizza },
        { id: 3, count: 0, name: "Mozzarella", price: 1.5, value: 0, src: pizza },
        { id: 4, count: 0, name: "Swiss cheese", price: 1.5, value: 0, src: pizza },
        { id: 5, count: 0, name: "Spices", price: 0.5, value: 0, src: pizza },
        { id: 6, count: 0, name: "Vegetable", price: 0.5, value: 0, src: pizza },
      ],
      foodsOrder: [],
    };
  }

并且您应该更改Increase功能。

handleIncrement = (id) => {
  this.setState({
    products: this.state.products.map((item) => item.id === id ? {...item, count:item.count+1} : {...item});
  });
}

您可以使用value属性作为产品的数量，看起来更好。

Answer 4

看来您所有产品都使用相同的state.count。您是否尝试过向state.products中的对象添加计数？您唯一需要通过的问题就是产品。