javascript - 如何从数组中仅减去选定的值

Question

你好，这是我的问题，当我选择一些建议时，我已经实现了一个表格填充的表格。该表包含三列（产品、数量、余额和添加按钮），因此当我单击添加按钮时，它会显示一些弹出表单。

所以我想在弹出菜单中添加一些数量时，然后单击添加按钮，它将根据所选产品从表中的余额字段中减少。下面是表格数组。

import React, { useState } from "react"
import {
  Grid,
  Table,
  TableContainer,
  TableHead,
  TableRow,
  TableCell,
  Paper,
  TableBody, 
  Button 
} from "@material-ui/core"
import AddItem from "./AddItem"
import { useStyles } from "../../../../styles/classes"

export default function ItemsList({
  cart,
  handleChange,
  handleBlur,
  values,
  setFieldValue,
  volumes
}) {

  const [open, setOpen] = useState(false)
  const [productId, setProductId] = useState("")
  const [factoryId, setFactoryId] = useState("")
 
  const handleClickOpen = (productId, factoryId) => {
    setProductId(productId)
    setFactoryId(factoryId)
    setOpen(true)
  }

  const handleClose = (value) => {
    setOpen(false)   
  }

  const addToList = (factory) => {
    setOpen(false)

    const product = cart.find(
      (item) => item.productId === Number(productId)
    )
  
    
    const item = {
      productId: productId,
      productName: product.productName,
      containerNo: values.containerNo,
      sealNo: values.sealNo,
      qty: values.qty,
      factoryId: factory.id,
      factory: factory.name,
      printDate: values.printDate,
      printTime: values.printTime,
      palletNo: values.palletNo,  
      

    }

    const idx = values.volumes.findIndex(e=>e.number === Number(values.noOfContainers))
    console.log(idx)
    const current = values.volumes[idx].data;
    current.push(item)
    
    setFieldValue(`volumes[${idx}].data`,current)  

    //sum of qty in loaded volumes for this product

    values.invoiceItems.forEach((item, idx) => {
      item.balance = (Number(item.balance) - Number(values.qty))
    })

    setFieldValue('invoiceItems', values.invoiceItems)   

  }

  const classes = useStyles()
  return (
    <Grid item md={12} sm={12} xs={12}>
      <TableContainer component={Paper} >
        <Table className={classes.table} size="small">
          <TableHead>
            <TableRow>
              <TableCell align="left">Product</TableCell>          
              <TableCell align="left">Quantity</TableCell>
              <TableCell align="left">Balance</TableCell>
              <TableCell align="left">Add</TableCell>             
            </TableRow>
          </TableHead>
          <TableBody>
            {cart.map((row, i) => (
              <TableRow key={i}>
                <TableCell align="left">{row.productName}</TableCell>             
                <TableCell align="left">{row.qty}</TableCell>       
                <TableCell align="left">{row.balance}</TableCell>                
                <TableCell align="left">
                  <Button
                    variant="outlined"
                    size="small"
                    color="secondary"
                    onClick={() => {
                      handleClickOpen(row.productId)
                    }}>
                    add
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

      <AddItem
        open={open}
        onClose={handleClose}
        handleChange={handleChange}
        handleBlur={handleBlur}
        values={values}
        addToList={addToList}
        volumes={volumes}
      />
    </Grid>
  )
}

import React, { useState} from "react"
import {
  Grid,
  Card,
  CardContent,
  CardActions,
  Button,
  CardHeader, 
} from "@material-ui/core"
import Alert from "@material-ui/lab/Alert"
import axios from 'axios'
//validation
import { Formik, Form } from "formik"
import * as Yup from 'yup'
import { useStyles } from "../../../styles/classes"


import ItemList from "./subComponents/ItemsList"
import MetaData from "./subComponents/MetaData"
import ContainerList from "./subComponents/ContainerList"
import {useInitialValues} from '../../../hooks/useLoadingInfoData'

 // validation schema
 let validationSchema = Yup.object().shape({
  volumes: Yup.string().required(),

})



export default function LoadingInfo(props) {
  const classes = useStyles() 
  const [initialValues, setInitialValues] = useInitialValues()
  const [volumes, setVolumes] = useState([])

  const [alert, setAlert] = useState({
    showAlert: false,
    severity: "success",
    message: "",
  })


   // create method
   const submit = async (e, { resetForm }) => {
    try {
      await axios.post("/loadingInfo", e)
      resetForm()
      setAlert({
        showAlert: true,
        severity: "success",
        message: "Loading Information created successfully!",
      })
    } catch (error){
      if (error.response.status === 422) {
        setAlert({
          showAlert: true,
          severity: 'error',
          message: 'Loading information already exists!',
        })
      } else {
        setAlert({
          showAlert: true,
          severity: 'error',
          message: 'Loading information creation failed!',
        })
      }
    } 
  }

   
  return (
   
    <Grid container className={classes.root} spacing={1}>
      <Grid item xs={12} sm={12} md={12}>
        <Formik
          initialValues={initialValues}
          onSubmit={submit}
          validationSchema={validationSchema}
          enableReinitialize>
          {({
            isValid,
            dirty,
            values,
            handleChange,
            handleBlur,
            setFieldValue,
            errors,
          }) => {
            return (
              <Form>
                <Card variant="outlined" style={{marginBottom: '1rem'}}>
                  <CardHeader title="Loading Information"></CardHeader>
                  <CardContent>
                    <Grid container spacing={1}>
                      <MetaData
                        values={values}
                        handleChange={handleChange}
                        handleBlur={handleBlur}
                        setAlert={setAlert}
                        setFieldValue={setFieldValue}
                      />                     
                      <ItemList
                        cart={values.invoiceItems}
                        values={values}
                        handleChange={handleChange}
                        handleBlur={handleBlur}
                        setFieldValue={setFieldValue}
                        volumes={volumes}
                      />
                    </Grid>
                  </CardContent>                 
                </Card>
                <Card variant="outlined">                 
                  <CardContent>
                  {values.volumes.map( (data , idx) => 
                    <ContainerList values={data}  idx={idx}  setFieldValue={setFieldValue}/>  
                  )}             
                                  
                  </CardContent>
                  <CardActions>
                  <Button 
                      variant="contained" 
                      color="primary" 
                      type="submit"  
                      disabled={!dirty || !isValid}>
                    create
                  </Button>
                   
                  </CardActions>
                </Card>
              </Form>
            )
          }}
        </Formik>
      </Grid>
      <Grid></Grid>
      {alert.showAlert && (
        <Grid item md={12}>
          <Alert
            severity={alert.severity}
            onClose={() =>
              setAlert({
                ...alert,
                showAlert: false,
              })
            }>
            {alert.message}
          </Alert>
        </Grid>
      )}
    </Grid>
  )
}

标签： javascriptreactjslogicformik