如何基于Formik字段的先前状态更新其状态？类似useState的setState用法

Formik提供了和React useState函数式更新逻辑一致的方案，核心是通过setFieldValue的函数式调用来实现，以下是具体的实现方式：

• 使用setFieldValue的函数式更新
  不管是通过useFormik钩子生成的表单实例，还是在Formik组件的回调逻辑里，都可以调用setFieldValue并传入一个函数作为第二个参数。这个函数会接收字段的先前值，返回计算后的新值。示例代码：

import { useFormik } from 'formik';

const formik = useFormik({
  initialValues: { count: 0 },
  onSubmit: (values) => console.log(values),
});

// 点击按钮更新count字段
<button onClick={() => {
  formik.setFieldValue('count', (prevCount) => prevCount + 1);
}}>
  计数+1
</button>

• 嵌套组件中用useFormikContext获取实例
  如果是在Formik表单的深层嵌套组件里，无需逐层传递表单实例，直接用useFormikContext钩子获取上下文即可调用setFieldValue：

import { useFormikContext } from 'formik';

function CountIncrementer() {
  const { setFieldValue } = useFormikContext();
  return (
    <button onClick={() => setFieldValue('count', prev => prev + 1)}>
      增加计数
    </button>
  );
}

注意：绝对不要直接修改formik.values中的字段值，必须通过Formik提供的API更新状态，这样才能保证表单状态的同步和组件的正确重渲染。

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