在React开发中，使用forEach循环对数值进行累加求和时，可能会遇到NaN（Not a Number）的问题。本文旨在解决此类问题，并提供正确的代码示例，确保数值计算的准确性。
问题分析
当使用forEach循环累加数值时，如果没有正确初始化累加变量，JavaScript会将其默认为undefined。undefined与任何数值进行加法运算都会得到NaN。因此，在循环开始前，务必为累加变量赋一个初始值，通常为0。
解决方案
以下是一个修复后的代码示例，展示了如何正确初始化累加变量：
const productsObj = [{ id: 1, name: 'Sweater', size: 'M', gender: 'Men', price: 2300, printPrice: 180, minQuantity: 1, total: 2300, }, { id: 2, name: 'Shirt', size: 'M', materijal: 'Pamuk', gender: 'Men', price: 1500, printPrice: 180, minQuantity: 1, total: 1500, }];const [products, setProducts] = React.useState(productsObj);//onChange on quantity input:const handleQuantityChange = (e, id) => { setProducts( products.map((item) => { if (item.id === id) { const quantity = parseInt(e.target.value, 10); // 确保是数字类型 const newTotal = item.price * quantity; return { ...item, quantity: quantity, total: newTotal, }; } else { return item; } }) );};//function that sums all the total'sconst allTotal = () => { let sum = 0; // 初始化累加变量为0 products.forEach((e) => { sum += e.total; }); return sum;};
关键修改：
在allTotal函数中，将sum变量初始化为0：let sum = 0;。在handleQuantityChange函数中，将event.target.value转换为数字类型，使用parseInt(e.target.value, 10)，确保quantity为数值类型。
替代方案：使用reduce方法
除了forEach循环，还可以使用reduce方法更简洁地实现数组元素的累加：
const allTotal = () => { return products.reduce((sum, product) => sum + product.total, 0);};
reduce方法接受两个参数：一个回调函数和一个初始值。回调函数接收两个参数：累加器（sum）和当前元素（product）。初始值（0）作为第一次调用回调函数时的累加器值。
注意事项
数据类型： 确保参与计算的变量是数值类型。如果从输入框获取的值是字符串类型，需要使用parseInt()或parseFloat()将其转换为数值类型。初始值： 始终为累加变量设置初始值，通常为0。错误处理： 在处理用户输入时，需要进行错误处理，例如检查输入是否为有效的数字。
总结
在React中使用forEach或reduce进行数值累加时，务必注意初始化累加变量，并确保参与计算的数据类型正确。正确处理这些细节可以避免NaN错误，保证数值计算的准确性。使用reduce方法通常可以使代码更简洁易读。
以上就是React中求和运算返回NaN的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1512958.html
微信扫一扫 
支付宝扫一扫 
