当验证函数在反应 FC 之外时，React 最终形式验证不起作用

Question

我有一个表单组件，我在其中为其提供了验证功能。当我在 FC 内部定义验证函数时，它可以工作。但是当我在 FC 外部提取该函数时，它不会被调用。

这有效：

import { FC } from 'react';
import { Form } from 'react-final-form';
const MyComponent: FC = () => {
const validate = (values: ValidationValues) => { ... }
return (
<Form
onSubmit={onSubmit}
validate={validate}
>
...
</Form>
);
}

这将不起作用：(验证函数不会被调用(

import { FC } from 'react';
import { Form } from 'react-final-form';
const validate = (values: ValidationValues) => { ... }
const MyComponent: FC = () => {
return (
<Form
onSubmit={onSubmit}
validate={validate}
>
...
</Form>
);
}

解决问题的方法是这样的，但我不明白这种行为的原因是什么：

import { FC } from 'react';
import { Form } from 'react-final-form';
const validate = (values: ValidationValues) => { ... }
const MyComponent: FC = () => {
return (
<Form
onSubmit={onSubmit}
validate={(values: ValidationValues) => validate(values)}
>
...
</Form>
);
}

有关我使用的软件包版本的一些信息：

react-final-form: 6.3.0
react: 16.8.6

Answer 1

问题是，当我们传递在 react 组件内部定义的验证函数时，每当组件重新渲染时，都会再次创建验证函数。

因此，在我们提取验证的情况下，它不会再次重新创建，因此，创建后不会再次运行。