如何在formik中将异步响应处理为验证错误

Question

我有这段代码。

export const PostcodeFinder: React.FC = () => {
const {
postcodeSearch,
isLoading,
data,
isPending,
error: fetchError,
} = usePostcodeSearch();

return (
<Formik
validate={(values) => {
// will be ran before the `fetchError` is set from async response
if (fetchError) {
return { postcode: fetchError };
}
return {};
}}

问题是，validate在提交表单时被调用onChange，因此它在异步响应返回之前运行。

如何在formik中设置异步响应的验证错误？

Answer 1

您需要返回一个promise，该promise将解决对象{ someKey: 'some message' }的错误

<Formik
validate={async (values) => {
const resp = fetch(`/validateEmailExists?email=${values.email}`);
const data = await resp.json();
if (data.emailExists) {
return { email: data.message /* it can be your own custom message */ };
}
return {};
}}