当验证功能在反应 FC 之外时，反应最终形式验证不起作用答案

【问题标题】：React Final Form validate is not working when the validate function is outside of the react FC当验证功能在反应 FC 之外时，反应最终形式验证不起作用
【发布时间】：2019-11-28 12:11:01
【问题描述】：

我有一个表单组件，我在其中提供了一个验证功能。当我在 FC 内部定义 validate 函数时，它可以工作。但是当我在 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

【问题讨论】：

标签： javascript reactjs typescript react-final-form

【解决方案1】：

问题在于，当我们传递在 react 组件内部定义的 validate 函数时，无论何时重新渲染组件，都会再次创建 validate 函数。

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

【讨论】：