在这个例子中如何计算并从数组中获取数据？

Question

代码从数据库中获取数据并将其分配给一个名为 rows 的数组，从中计算 invoiceSubtotal（使用名为 subtotal 的函数）、invoiceTaxes 和 invoiceTotal。数据存储在数组中，但分配给 invoiceSubtotal、invoiceTaxes 和 invoiceTotal 的数据未定义，当我将品牌名称映射到表中时，它也未定义。

反应

import React,{useEffect, useState} from 'react'
import Axios from "axios";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';


export default function DisplaySell() {
    const [inventoryList, setinventoryList] = useState([])
    const [invoiceSubtotal, setinvoiceSubtotal] = useState();
    const [invoiceTaxes, setinvoiceTaxes] = useState();
    const [invoiceTotal, setinvoiceTotal] = useState();

    useEffect(() => {

        async function fetchUser() {
          const fullResponse = await (fetch("http://localhost:3001/getselldatatable"));
          const responseJson = await fullResponse.json();
          setinventoryList(responseJson);
          //console.log("called",inventoryList);
        }
        fetchUser();
      
      
    },);
    const TAX_RATE = 0.07;
    function priceRow(Quantity, unit) {
      return Quantity * unit;
    }
    function createRow(Brandname, Quantity, unit) {
      const price = priceRow(Quantity, unit);
      return { Brandname, Quantity, unit, price };
    }
    const rows = [
      inventoryList.map((e, key) => {
        return createRow(e.Brandname,e.NumberItems ,e.Price )
    })
    ];
    console.log("rows",rows)

    if(rows.length>1)
    {
      console.log("yes")

      function subtotal(items) {
        console.log("items",items)
        return rows.reduce((totalsum, row) => totalsum + row.price, 0);
    }
      setinvoiceSubtotal(subtotal(rows))
      setinvoiceTaxes(TAX_RATE * invoiceSubtotal)
      setinvoiceTotal(invoiceTaxes + invoiceSubtotal)
      
    }

    return (
        <div>
            <TableContainer component={Paper}>
      <Table  aria-label="spanning table">
        <TableHead>
          <TableRow>
            <TableCell>Brand Name</TableCell>
            <TableCell align="right">Quantity</TableCell>
            <TableCell align="right">Price</TableCell>
            <TableCell align="right">Sum</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.desc}>
              {console.log("test here",row.Brandname)}
              <TableCell>{row.Brandname}</TableCell>
              <TableCell align="right">{row.Quantity}</TableCell>
              <TableCell align="right">{row.unit}</TableCell>
              <TableCell align="right">{row.price}</TableCell>
            </TableRow>
          ))}

          <TableRow>
            <TableCell rowSpan={3} />
            <TableCell colSpan={2}>Subtotal</TableCell>
            <TableCell align="right">{invoiceSubtotal}</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Tax</TableCell>
            <TableCell align="right">{`${(TAX_RATE * 100).toFixed(0)} %`}</TableCell>
            <TableCell align="right">{invoiceTaxes}</TableCell>
          </TableRow>
          <TableRow>
            <TableCell colSpan={2}>Total</TableCell>
            <TableCell align="right">{invoiceTotal}</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableContainer>
        </div>
    )
}

节点

app.get("/getselldatatable", (req, res) => {
    const EmailID1=sellEmailID1;
    console.log("here",EmailID1);
            db.query(getsalessql,[EmailID1],(err, result1) => {
                if (err) {
                    console.log(err);
                } else {
                    console.log(result1)
                        let getsalessql2 = `SELECT m.Brandname, s.NumberItems,i.Price FROM medicinedatabase as m LEFT JOIN inventory as i ON m.idMedicineDatabase = i.idMedicineDatabase LEFT JOIN sales as s ON m.idMedicineDatabase = s.idMedicineDatabase where m.idMedicineDatabase IN (${result1.map(r => r.idMedicineDatabase).join(',')})`;
                        db.query(getsalessql2,(err, resultnew) => {
                            if (err) {
                                console.log(err);
                            } else {
                                console.log(resultnew)
                                //console.log(resultnew)
                                res.json(resultnew)
                            }

                        });
                    
                }
          });
    
});

Answer 1

我想你可能有问题

const rows = [
      inventoryList.map((e, key) => {
        return createRow(e.Brandname,e.NumberItems ,e.Price )
    })
];

map 函数已经返回了一个数组，因此将其包装在 [] 中会导致 rows 成为另一个数组中的一个数组，因此当您尝试在 JSX 中访问 row.brandname 时，您会得到一个未定义的值。

我觉得应该是这样的

const rows = inventoryList.map((e, key) => {
    return createRow(e.Brandname,e.NumberItems ,e.Price )
});