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

【问题标题】：invoke function from context in Formik component will cause warning从 Formik 组件中的上下文调用函数将导致警告
【发布时间】：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。

标签： reactjs formik react-context

【解决方案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/>
  );


}

【讨论】：