React JS中如何在map方法内实现价格求和且避免无限循环？

问题根源 #

• 你在JSX渲染的map遍历逻辑里直接调用了setTotalPrice这个状态更新方法。在React中，状态更新会触发组件重新渲染，重新渲染又会再次执行map逻辑、调用状态更新方法，就形成了无限循环。
• 你当前的累加逻辑也存在错误，每次重新渲染都会在上一次总价的基础上继续累加，最终数值也不符合预期。

修复方案 #

你需要的总价可以通过已有的libros商品列表、cantidad购买数量这两个状态直接计算得到，不需要单独用useState存储，也不需要在渲染过程中调用更新方法，具体修改步骤如下：

1. 删除原有代码中不需要的部分：
   • 删掉const [totalPrice, setTotalPrice] = useState();状态定义
   • 删掉calculateTotal函数定义
   • 删掉map遍历中的{calculateTotal(fixedPrice)}调用
2. 在组件return之前添加总价计算逻辑：

// 总价会随libros、cantidad的变化自动更新
const totalPrice = libros.reduce((sum, libro, index) => {
  return sum + parseFloat(libro.precio) * cantidad[index]
}, 0).toFixed(2)

3. 你需要展示总价的位置直接使用totalPrice变量即可，比如可以在表格下方加一行展示：

<div>总价：${totalPrice}</div>

其他可优化的代码问题 #

你现有代码中还有几处不符合React规范的写法，建议同步修改：

1. map的参数使用错误，map的第三个参数是遍历的原数组，你写的fixedPrice拿不到你想要的计算后价格，价格列的写法可以改成：

<td>${(parseFloat(libros.precio) * cantidad[index]).toFixed(2)}</td>

2. 数量加减函数直接修改了原状态数组，不符合React不可变数据规范，修改后写法：

const mas = (index) => {
  const newCantidad = [...cantidad]
  newCantidad[index] += 1
  setCantidad(newCantidad)
};

const menos = (index) => {
  if (cantidad[index] > 0){
    const newCantidad = [...cantidad]
    newCantidad[index] -= 1
    setCantidad(newCantidad)
  } else {
    window.alert("Sorry, Zero limit reached");
  }
};

内容的提问来源于stack exchange，提问作者React Enjoyer