阻止在路由更改时提交 福米克自动保存

Question

我的应用程序具有带有<AutoSave/>组件的表单。更改表单值后，此组件调用将提交。一切正常，但是当更改路由时，它会更改表单值并<AutoSave/>调用提交。如何解决这个问题？一种可能的解决方案是在更改路由时再次挂载<AutoSave/>。

代码沙盒

自动保存：

import React, { useEffect, useCallback } from 'react'
import { useFormikContext } from 'formik'
import debounce from 'lodash.debounce'
const AutoSave = ({ debounceMs }) => {
const formik = useFormikContext()
const debouncedSubmit = useCallback(
debounce(formik.submitForm, debounceMs),
[formik.submitForm, debounceMs]
)
useEffect(() => debouncedSubmit, [debouncedSubmit, formik.values])
return <>{!!formik.isSubmitting && "saving..."}</>
}

我的应用：

const App: FC = () => {
const {books} = getBooks() // [{id: 1, title: 'test', summary: 'test'}, ...]
const {query} = useRouter()
const handleSubmit = useCallback(async values => {
try {
await API.patch('/books', {id: query.book, ...values})
} catch (e) {}
}, [query.book])
return (
<>
<span>Books</span>
{books.map(({id, title}, key) => (
<Link key={key} href='/book/[book]' as={`/book/${id}`}>
<a>{title}</a>
</Link>
))}
{query.book && (
<MainForm  
book={books.find(book => book.id === query.book)}
handleSubmit={handleSubmit}/>
)}
</>
)
}

主窗体：

type Props = {
book: BookProps // {id: string, title: string ...},
handleSubmit: (values) => Promise<void>
}
const MainForm: FC<Props> = ({book, handleSubmit}) => (
<Formik 
enableReinitialize 
initialValues={{title: book.title, summary: book.summary}}
handleSubmit={values => handleSubmit(values)}>
{() => (
<Form>
//...My fields...
<AutoSave debounceMs={500}/> // <=== AutoSave with debounce
</Form>
)}
</Formik>
)

Answer 1

看看：https://codesandbox.io/s/clever-sun-057vy

# Problem
useEffect(() => debouncedSubmit, [debouncedSubmit, formik.values]);

即使安装组件，formik.values也会始终更改。这就是为什么debouncedSubmit在路线变更时被召唤的原因。

所以基本上，我们不想先将其作为组件渲染运行，而是在用户更改表单时运行。

formik.dirty是关键。只需在提交之前检查formik.dirty即可。

const AutoSave = ({ debounceMs }) => {
const formik = useFormikContext();
const debouncedSubmit = useCallback(
debounce(formik.submitForm, debounceMs),
[formik.submitForm, debounceMs]
);
useEffect(() => {
formik.dirty && debouncedSubmit();
}, [debouncedSubmit, formik.dirty, formik.values]);
return <>{!!formik.isSubmitting && 'saving...'}</>;
};

另一件事是 Formik 实例。此Formik将用于所有书籍。 因此，您需要在使用 prop 将新书绑定到其中时重置表单enableReinitialize。

<Formik
enableReinitialize
initialValues={{ title: book.title, summary: book.summary, id: book.id }}
onSubmit={values => handleSubmit(values)}
>

或者对每本书使用单独的实例key={book.id}

<Formik
key={book.id}
initialValues={{ title: book.title, summary: book.summary, id: book.id }}
onSubmit={values => handleSubmit(values)}
>

Answer 2

你需要有类似firstSubmit的东西，在那里你检查firstSubmit是否已经发生，所以它只在第二次提交时调用AutoSave(它实际上改变了(。

const AutoSave = ({debounceMs}) => {
const [firstSubmit, setFirstSubmit] = React.useState(false)
const formik = useFormikContext();
const debouncedSubmit = React.useCallback(
debounce(firstSubmit ? formik.submitForm : () => setFirstSubmit(true), debounceMs),
[debounceMs, formik.submitForm, firstSubmit, setFirstSubmit]
);
React.useEffect(debouncedSubmit , [debouncedSubmit, formik.values]);
return <>{!!formik.isSubmitting ? 'saving...' : null}</>;
}

我不确定代码是否有效，我还没有测试过它，因为我不确定debounce来自哪里，但逻辑就是这样。

您应该检查它是否已经提交过一次，如果是，请跳过它，仅在第二次提交时提交。

如果您提供一个工作示例，我可以对其进行测试，并在上面的代码不起作用时使其工作。