当验证函数在 React FC 之外时，React Final Form 验证不起作用

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 组件内部的验证函数时，每当重新渲染组件时，都会再次创建验证函数。

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

当验证函数在 React FC 之外时，React Final Form 验证不起作用

React Final Form validate is not working when the validate function is outside of the react FC

javascript

reactjs

typescript

react-final-form