如何将Formik的dirty状态/值提升至父组件？

问题根源 #

你当前的写法会触发React的setState报错，原因是在Formik的render回调函数中直接调用父组件的setDirty：每次Formik内部状态变化（包括dirty状态更新）都会执行这个回调，而setDirty会触发父组件重渲染，进而导致子组件重新渲染，再次执行Formik的render回调，形成无限循环，最终触发"Too many re-renders"类的报错。

正确实现方式 #

通过useEffect监听Formik的dirty状态变化，仅当dirty值真正改变时，再通知父组件更新状态，同时建议修改props命名避免混淆：

父组件代码（可选优化命名）

const Parent = () => {
  const [dirty, setDirty] = useState(false)
  // 将props命名为onDirtyChange，语义更清晰，避免和子组件内部变量冲突
  return (
    <ChildComponent onDirtyChange={setDirty} />
  ) 
}

子组件代码修改

import { useEffect } from 'react';

// ...
<Formik initialValues={initialValues} onSubmit={onSubmitHandler} validationSchema={schema}>
  {({ values, setFieldValue, handleSubmit, dirty }) => {
    // 仅当Formik的dirty状态变化时，调用父组件的状态更新函数
    useEffect(() => {
      props.onDirtyChange(dirty);
    }, [dirty, props.onDirtyChange]); // 依赖项：dirty和父组件传的回调函数

    return (
      <Form onSubmit={handleSubmit}>
        {/* 你的表单元素 */}
      </Form>
    )
  }}
</Formik>

原理说明 #

• useEffect会在其依赖数组中的值发生变化时执行回调逻辑，这里只有当Formik的dirty状态真正改变，或者父组件的onDirtyChange函数更新时，才会触发父组件的状态更新。
• 这种方式切断了"父组件重渲染→子组件重渲染→调用setDirty→父组件重渲染"的循环，既实现了状态提升，又符合React的状态更新规范。

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