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

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>
)
}

<<p>节点/strong>

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 )
});