Formik中数组出现undefined问题：如何正确计算price与qty的总和

原代码的核心问题 #

1. 每次循环都新建空数组qty，再用qty[i]赋值，会导致数组未赋值的索引位置出现undefined，比如i=1时qty[0]就是undefined，reduce计算时会把undefined当作NaN处理，导致结果异常。
2. 在map循环里重复调用setSum，最终sum只会是最后一次循环的结果，而非所有有效乘积的总和。

修正后的代码实现 #

<Formik
  initialValues={initialValues}
  onSubmit={async (values) => {
    await new Promise((r) => setTimeout(r, 500));
    // 直接遍历product数组，过滤有效项后求和
    const totalSum = values.product.reduce((total, item) => {
      // 确保qty和price都是有效数字
      if (item.qty && item.price && !isNaN(item.qty) && !isNaN(item.price)) {
        return total + item.qty * item.price;
      }
      return total;
    }, 0);
    setSum(totalSum);
    console.log("-------总和------");
    console.log(totalSum);
  }}
>

关键改进点 #

• 用reduce直接遍历计算，不需要额外创建数组，从根源避免undefined的产生。
• 增加!isNaN判断，防止输入无效数字（比如非数字字符串转数字失败的情况）。
• 一次性计算总和后调用setSum，避免多次更新状态导致的逻辑错误。

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