Formic存储值返回异常求助：存入与读取值不一致

我存入Formik的金额无法正常返回。过滤器获取的值已在第57行打印日志，第58行将该值存入Formik。但在下一行打印Formik的值时，有时显示的是第57行获取的新值，有时却显示之前的旧值。

核心原因及解决办法 #

• Formik状态更新是异步操作
  setFieldValue不会立即同步更新Formik的values状态，调用后立刻打印values，大概率拿到的是更新前的旧值，这是异步状态更新的正常表现。

• 选择正确的时机获取更新后的值

  1. 使用useEffect监听字段变化：

  useEffect(() => {
    console.log('更新后的金额:', values.amount);
    // 在这里处理更新后的业务逻辑
  }, [values.amount]);
  

  2. 利用setFieldValue的回调函数：

  setFieldValue('amount', 过滤后的值, false, () => {
    console.log('更新完成后的金额:', values.amount);
  });
  

  第三个参数shouldValidate设为true时，会触发表单校验，回调会在校验完成后执行。

• 排查竞态条件
  检查代码中是否有其他地方同时修改该金额字段，多个setFieldValue调用可能导致状态更新冲突，出现值被覆盖的情况。

• 确认过滤器返回值的稳定性
  虽然第57行打印了过滤器的值，但要确保过滤器依赖的状态或参数是正确更新的，避免过滤器偶尔返回旧值导致问题。

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