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

Question

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

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

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

我在这里发现了一个类似的问题，但答案似乎并不完美。

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

Answer 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/>
  );


}

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

invoke function from context in Formik component will cause warning

reactjs

formik

react-context