反应数组计数值，计算总价

Question

从下拉列表中选择一项时，对象的“价格”项将用于“countTotalPrice”函数。在此函数中，每次选择项目时，都会将新项目的价格添加到现有的系列中。

此时，该函数将值推入数组，但它会不断覆盖先前的值，而不是将新值添加到先前的值中。

我想要实现的是，当有人选择一种治疗方法并创建行时，所创建行的所有价格加在一起就是总金额。

代码：

import React from "react";
import { useState } from 'react';
import { makeStyles } from "@material-ui/core/styles";

import styles from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { Col } from "react-bootstrap";
import Close from '@material-ui/icons/Close';
import { render } from "react-dom";

const useStyles = makeStyles(styles);


export default function ChaskDesk() {

  const employee = ["Robin","Raoul","Joppe "];

  const service = [{
        id: 1,
        name: 'Knippen',
        price: 11.00

    },
    {
        id: 2,
        name: 'Scheren',
        price: 10.00
    },
    {
        id: 3,
        name: 'Wassen',
        price: 12.00

  }]
  const counting = [1,2,3,4,5,6];
  const gender = ["man", "vrouw", "kind"];
  const client = ["Passant"];

  const [employeeOrder, setEmployeeOrder] = useState('');
  const [serviceOrder, setServiceOrder] = useState([]);
  //const serviceOrder = [];
  const countingOrder = [];
  const genderOrder = [];
  const clientOrder = "";




  const [payment, setPayment] = useState([]);
  //const payment = 0;
  const classes = useStyles();

    const handelChangeGender = function(event){
        genderOrder.push(event.target.value);
    };

    //this function
    const handelChangeService = function(event){
        for(var i = 0; i < service.length; i++) {
            if (service[i].id == event.target.value) {
                setServiceOrder([...serviceOrder,{name: service[i].name, price: service[i].price, id:service[i].id}]);
                countTotalPrice(service[i].price);

            }
        }
    };

    //this function
    const countTotalPrice = function(price){
        const counts = [];
        counts.push(price);
        console.log(counts);
    };



    const popService = function(event){
        setServiceOrder(serviceOrder.filter(item => item.id !== event));
    };

    const handelChangeEmployee = function(event) {
        setEmployeeOrder(event.target.value)
    };






  return (
    <div>
      <Container className={classes.containerPixelActive}>
          <h3>Afrekenen</h3>
          <Row className={classes.tablePixelRow}>
            <Col md={8} className={classes.rowChashdesk}>
            <form>
            <Row>
                    <Col md={6}>
                    <label>
                        Klant:
                    </label>
                    <br/>
                    <select >
                        {
                            client.map(function(item, i){
                                return <option key={i} value={item}>{item}</option>
                            }) 
                        }
                    </select>
                    </Col>
            </Row>
            <Row>
                    <Col md={6}>
                <div className={classes.rowOfForm}>
                    <label>
                        Gender:
                    </label>
                    <br/>
                    <select onChange={handelChangeGender}>
                        {
                            gender.map(function(item, i){
                                return <option key={i} value={item}>{item}</option>
                            }) 
                        }
                    </select>
                </div>
                </Col>
            </Row>
                <Row>
                    <Col md={6}>
                    <div className={classes.rowOfForm}>
                        <label>
                            Behandeling:
                        </label>
                        <br/>
                        <select onChange={handelChangeService}>
                        {
                            service.map(function(item){
                                return <option key={item.id} value={item.id}>{item.name}</option>
                            }) 
                        }
                    </select>
                    </div>
                    </Col>
                    <Col md={6}>
                    <div className={classes.rowOfForm}>
                        <label>
                            Medewerker:
                        </label>
                        <br/>
                        <select onChange={handelChangeEmployee}>
                        {
                            employee.map(function(item, i){
                                return <option key={i} value={item}>{item}</option>
                            }) 
                        }
                    </select>
                    </div>
                    </Col>
                </Row>
                {
                            serviceOrder.map(function(item, i){
                                console.log(item)
               return <Row key={i} >
                    <Col md={6}>
                    <div className={classes.rowOfForm}>
                        <label>
                            Verkregen behandeling:
                        </label>
                        <br/>

                            <input type="text" name="name" value={item.name}/>

                    </div>
                    </Col>
                    <Col md={2}>
                    <div className={classes.rowOfForm}>
                        <label>
                            Aantal:
                        </label>
                        <br/>
                        <select>
                        {
                            counting.map(function(item, i){
                                return <option key={i} value={item}>{item}</option>
                            }) 
                        }
                    </select>
                    </div>
                    </Col>
                    <Col md={2}>
                    <div className={classes.rowOfForm}>
                        <label>
                            Prijs:
                        </label>
                        <br/>
                            <input type="text" name="name" value={item.price}/>
                    </div>
                    </Col>
                    <Col md={2}>
                    <div className={classes.rowIcon}>
                        <Close size={20} onClick={() => popService(item.id)}></Close>
                    </div>
                    </Col>
                </Row>
            })}
            </form>
            </Col>

            <Col md={3} className={classes.rowChashdesk}>
                <h5>Totaal overzicht</h5>
                <h6>Medewerker</h6>
                <p>{employeeOrder}</p>
                <h6>Behandeling</h6>    
                <ul>
                {
                    serviceOrder.map(function(item, i){
                        return <li class="listTreatment" key={i}>{item.name}</li>
                    })
                }
                </ul>

                <h6>Aantal</h6>
                <p>{countingOrder}</p>
                <h6>Klant</h6>
                <p>{clientOrder}</p>
                <h6>Te betalen</h6>
                <p>{countTotalPrice}</p>
            </Col>

          </Row>
      </Container>
    </div>
  );

}

Answer 1

每次运行该函数时，您都会生成新的计数数组。

const countTotalPrice = function(price){
        const counts = [];
        counts.push(price);
        console.log(counts);
    };

您应该在此函数之外声明计数

请尝试将其重置为状态

const [counts, setCounts] = useState([]);
//.....
const countTotalPrice = function(price){
 let newCounts = counts
        newCounts.push(price);
        setCounts(newCounts );
        console.log(counts);
    };