如何基于前值设置Formik字段值？解决异步并行更新异常

Formik的setFieldValue完全支持你期望的函数式更新写法，和React useState的用法逻辑一致，能完美解决异步并行场景下的状态更新问题。

问题根源 #

你最初的写法里，直接通过formik.values.testvalue + num计算新值，会因为闭包捕获的是初始值，在异步并行执行时，所有更新操作都基于同一个旧值计算，最终只会保留最后一次的更新结果。

正确实现方式 #

直接给setFieldValue的第二个参数传一个接收前值的函数，Formik会自动传入当前字段的最新值作为参数，每次更新都基于最新状态计算：

const onButtonClick = () => {
  Array.from(Array(5).keys())
    .forEach((num) => formik.setFieldValue("testvalue", (prev) => prev + num));
};

这样不管是同步批量更新还是异步并行更新，每次都会拿到最新的testvalue值，最终结果会是所有num的总和。

补充说明 #

Formik的状态更新API（包括setFieldValue、setValues等）都支持函数式更新，这是专门为依赖前状态的更新场景设计的，和React内置的状态更新逻辑对齐，能有效避免闭包导致的状态不一致问题。

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