从 Formik 组件中的上下文调用函数将导致警告

Posted 2023-02-22

【中文标题】从 Formik 组件中的上下文调用函数将导致警告

【英文标题】：invoke function from context in Formik component will cause warning

【发布时间】：2021-10-06 22:23:36

【问题描述】：

   <Formik
        enableReinitialize
        initialValues=testState
        validateOnChange
        onSubmit=onSubmit>
            (formProps) => 
              formProps.dirty && !isEmpty(formProps.touched) && handleFormDirty();
              return (
                <TestComponent />
              );
            
     </Formik>

handleFormDirty 是来自 React 上下文的函数，它将改变 React 上下文中的状态。但是，当我尝试调用 handleFormDirty 时，它会显示如下警告：

要在 Formik 中找到错误的 setState() 调用，请按照描述的堆栈跟踪进行操作

我在这里setState called in render prop is causing a react warning 发现了一个类似的问题，但答案似乎并不完美。

有什么想法吗？非常感谢。

【问题讨论】：

为什么每次渲染都调用它？它实际上是做什么的？

当我单击取消按钮或面包屑链接以在表单变脏和触摸时离开页面时，我需要弹出一个模式。然后我使用 handleFormDirty 来改变状态 isFormdirty。

【参考方案1】：

做一个效果。你不能在渲染的同时更新状态：

const ParentComponent = (props) => 

   return (
     <Formik
        enableReinitialize
        initialValues=testState
        validateOnChange
        onSubmit=onSubmit
     >
          (formProps) => <MyFormComponent ...formProps handleDirty=handleFormDirty/>
     </Formik>
   );



const MyFormComponent = (handleDirty,...formProps) => 

  useEffect(() => 
    formProps.dirty && !isEmpty(formProps.touched) && handleFormDirty();
  ,[formProps.touched,formProps.dirty,handleDirty]);

  return (
    <TestComponent/>
  );