Javascript 根据.map（）中以前填充的值计算新值

我正在使用.map（）函数在react Js中创建一个表。在表的最后一个

中，我通过一个函数计算产品的纳税额。此金额填充为其指定的每一行

 {
          (!cr.items.length < 1) &&
           cr.items.map((item , ind) => {
               return(
                      <td scope="col">{(item) ? taxedValue(item.quantity , item.salesInfo.unitPrice , item.discount , item.tax) :null}</td>
                 </tr>
                 )
        })
 }

我想加上{1+2}=3（//将此作为我在代码中任何地方访问它的总数量//}

---

我尝试调用初始值为0的状态函数。但是得到一个错误

重新渲染过多

我认为您可以在单独的函数中这样做，以保持逻辑隔离。您可以做的是定义一个变量，并在

映射的每次迭代中增加值，然后在最后一个元素中，渲染一个额外的co立柱。类似这样的：

const renderColumns = () => {
  let total = 0;

  if (!cr.items.length < 1) {
    return cr.items.map((item , ind) => {
      const value = item ? taxedValue(item.quantity , item.salesInfo.unitPrice , item.discount , item.tax) : null;
      total += value || 0;

      return (
        <>
          <td scope="col">{value}</td>
          {ind === cr.items.length - 1 ? (
            <td>{total}</td>
          ) : null}
        </>
      );
    });
  }

  return null;
};

const renderColumns=（）=>{
设total=0；
如果（！cr.items.length<1）{
返回cr.items.map（（item，ind）=>{
const value=item？taxedValue（item.quantity，item.salesInfo.unitPrice，item.折扣，item.tax）：空；
总+=值| | 0；
返回(
{value}
{ind==cr.items.length-1(
{total}
)：null}
);
});
}
返回null；
};
在
数组.prototype.map
函数中简单地添加一个总和是很容易的，但是这个回调是一个没有副作用的纯函数

我建议只使用
array.prototype.reduce
单独计算总值。如果禁止在每个渲染周期中计算两次赋税值，则重构代码以计算一次赋税值，并将其注入要映射的数据中，并将其添加到总值中

const computeTotalTaxedValue = cr.items.reduce(
  (total, item) => item ? taxedValue(item.quantity, item.salesInfo.unitPrice, item.discount, item.tax) : 0,
  0,
);

如果禁止在每个渲染周期内为每个项目计算两次已征税值，请计算一次并将其注入数据并计算总和

const [totalTaxedValue, setTotalTaxedValue] = useState(0);
const [taxedValues, setTaxedValues] = useState([]);

useEffect(() => {
  let totalTaxedValue = 0;
  const taxedValues = [];

  cr.items.forEach(item => {
    const taxValue = item ? taxedValue(item.quantity, item.salesInfo.unitPrice, item.discount, item.tax) : null;
    totalTaxedValue += taxValue;
    taxedValues.push(taxValue);
  });

  setTotalTaxedValue(totalTaxedValue);
  setTaxedValues(taxedValues);
}, [cr.items]);

...

{
  (!taxedValues.length < 1) &&
  taxedValues.map((taxValue, ind) => <td scope="col">{taxValue}</td>
  })
}

const[totalTaxedValue，setTotalTaxedValue]=useState（0）；
const[taxedValues，setTaxedValues]=useState（[]）；
useffect（（）=>{
设totalTaxedValue=0；
const taxedValues=[]；
cr.items.forEach（item=>{
const taxValue=item？taxedValue（item.quantity，item.salesInfo.unitPrice，item.折扣，item.tax）：空；
总税收价值+=税收价值；
taxdvalues.push（taxValue）；
});
设置totalTaxedValue（totalTaxedValue）；
设置税收价值（税收价值）；
}，[cr.项目]；
...
{
（！taxedValues.length<1）&&
taxedValues.map（（taxValue，ind）=>{taxValue}
})
}

const [totalTaxedValue, setTotalTaxedValue] = useState(0);
const [taxedValues, setTaxedValues] = useState([]);

useEffect(() => {
  let totalTaxedValue = 0;
  const taxedValues = [];

  cr.items.forEach(item => {
    const taxValue = item ? taxedValue(item.quantity, item.salesInfo.unitPrice, item.discount, item.tax) : null;
    totalTaxedValue += taxValue;
    taxedValues.push(taxValue);
  });

  setTotalTaxedValue(totalTaxedValue);
  setTaxedValues(taxedValues);
}, [cr.items]);

...

{
  (!taxedValues.length < 1) &&
  taxedValues.map((taxValue, ind) => <td scope="col">{taxValue}</td>
  })
}