<Formik
enableReinitialize
initialValues={testState}
validateOnChange
onSubmit={onSubmit}>
{(formProps) => {
formProps.dirty && !isEmpty(formProps.touched) && handleFormDirty();
return (
<TestComponent />
);
}}
</Formik>
HandleFormDirty是React上下文中的函数,它将更改React上下文中的状态。但是,当我尝试调用handleFormDirty时,它会显示如下警告:
要在Formik
中找到错误的setState()调用,请按照所述的堆栈跟踪
我在这里发现了一个类似的问题setState调用渲染道具引起反应警告,但似乎答案并不完美。
有什么想法吗?谢谢。
在某种程度上做到这一点。不能在渲染时同时更新状态:
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/>
);
}