React Formik构建后onSubmit提交失败问题求助

使用react-scripts start启动的开发环境中，Formik的onSubmit功能可正常提交，但项目构建后本地部署时无法提交。未直接报错，但出现警告：

Formik.tsx:834 Warning: An unhandled error was caught from submitForm() ReferenceError: _i9 is not defined

Chrome控制台指向onSubmit内的代码行：

for(let i = 1; i <= values.numberOfTokens; i++) {
    let tokenTypeValue = parseInt(values.tokenTypes[i-1]);
}

values.tokenTypes在Formik的initialValues中初始化方式如下：

let tokenTypeArray = [1];
    
return(
    <Formik 
        initialValues={{tokenTypes: tokenTypeArray ...

开发环境无任何警告或错误，构建后却失败，请问有人遇到过类似问题吗？

可能的原因及解决办法 #

• 数组越界触发压缩后变量异常：生产环境代码经过压缩混淆，_i9是被压缩后的变量名（大概率和循环索引或数组下标相关）。核心问题可能是values.numberOfTokens的值大于tokenTypes数组的实际长度，导致i-1超出数组下标范围——开发环境可能因数据刚好符合预期没触发，生产环境压缩后抛出了混淆后的错误提示。
  解决：循环前增加边界判断，避免越界：

  const safeCount = Math.min(values.numberOfTokens, values.tokenTypes.length);
  for(let i = 1; i <= safeCount; i++) {
      let tokenTypeValue = parseInt(values.tokenTypes[i-1]);
      // 后续业务逻辑
  }
  

• initialValues初始化的引用问题：生产环境下，tokenTypeArray的初始化可能被打包工具优化，导致tokenTypes未被正确初始化为预期数组。可以尝试直接在initialValues中写死初始值，避免引用变量可能带来的问题：

  initialValues={{tokenTypes: [1], ...}}
  

• 依赖版本兼容性问题：部分旧版本Formik和新版react-scripts打包时，会出现压缩后的变量异常。尝试升级Formik到最新稳定版，或者降级react-scripts到双方兼容的版本。
• parseInt的参数异常：如果values.tokenTypes[i-1]是undefined，parseInt(undefined)会返回NaN，可能引发后续逻辑错误，进而触发Formik的提交报错。可以添加默认值兜底：

  let tokenTypeValue = parseInt(values.tokenTypes[i-1] || 0);
  

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