在 map function javascript 中使用 useState 计算

Question

大家好，我有一个这样的数组：

[
 {
   "name": "test",
   "amount": 794.651786,
   "id": "60477897fd230655b337a1e6"
 },
 {
   "name": "test2",
   "amount": 10.80918,
   "id": "60477bfbfd230655b337a1e9"
 }
] 

而且我不想计算每笔金额的总和。

我尝试使用这样的 useState 钩子：

const [total, setTotal] = useState(Number);
array.map((item) => {

 setTotal(total + item.amount);

});

但它似乎没有按预期工作。

Answer 1

您可以使用reduce方法，请参阅文档。

setTotal(array.reduce((sum, item) => sum + item.amount, 0))

我邀请您阅读此JavaScript：Difference between.forEach() 和 .map() 。 你不应该像这样使用.map 。 对于此用例，请改用.forEach 。

Answer 2

您可能希望使用所需的最少调用来更新 state。 所以首先，我会这样做：

let _total = 0;
array.forEach((item) => {
   _total += item.amount;
});
setTotal(_total);

也就是说，如果array已更改，您只想执行此操作。 假设数组是一个道具，这可以通过useEffect钩子轻松完成：

useEffect(()=>{
    let _total = 0;
    array.forEach((item) => {
        _total += item.amount;
    });
setTotal(_total);
},[array]);

希望这可以帮助您全面了解最佳实践。 您还可以查看钩子的规则，以更好地了解在哪里最好调用setState

Answer 3

我的评论没有得到解决，但我将添加一个解决我关注的答案 - total根本不应该是 state。

total很可能不是 state - 它是计算出来的 state - 即它来自其他 state 和/或道具。

如果是这种情况（99%），将 total 设置为 state 是不正确的，这只会导致更多代码和更复杂的调试：

例子：

当数据源是道具时：

const Cart = ({someItemsInMyCart}) => {
   const total = useMemo(() => someItemsInMyCart.reduce((acc,item) => acc+item.amount,0),[someItemsInMyCart]);

   return (/* some JSX */);
}

当数据源为 state 时：

const Cart = () => {
   const [items,setItems] = useState([]);
   const total = useMemo(() => items.reduce((acc,item) => acc+item.amount,0),[items]);

   return (/* some JSX */);
}

您可以编写上面的这两个示例并完全useMemo ，这只是一种性能优化，因为以这种方式减少数组非常快，除非您要处理 1000 个项目。

Answer 4

试试这个方法

const [total, setTotal] = useState(0);

array.map((item) => {
 setTotal(prevCount => prevCount + item.amount);    
});