提问者:小点点

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


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

HandleFormDirty是React上下文中的函数,它将更改React上下文中的状态。但是,当我尝试调用handleFormDirty时,它会显示如下警告:

要在Formik中找到错误的setState()调用,请按照所述的堆栈跟踪

我在这里发现了一个类似的问题setState调用渲染道具引起反应警告,但似乎答案并不完美。

有什么想法吗?谢谢。


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


}