antd onChange запускается три раза при каждом нажатии клавиши

Question

У меня есть следующая форма в antd с кодом, почти дословно взятым с официального сайта . Песочница кода также здесь :

Проблема с приведенным ниже кодом заключается в том, что при каждом нажатии клавиши в поле метод onChange запускается три (3) раза. Вы также можете убедиться в этом по ссылкеcodeandbox, если откроете консоль браузера. Я хотел бы понять, почему это так и что с этим можно сделать.

<code>import React from 'react';
import { Form, Input } from 'antd';

import {FieldData} from 'rc-field-form/es/interface.d.ts';
interface CustomizedFormProps {
  onChange: (fields: FieldData[]) => void;
  fields: FieldData[];
}


const CustomizedForm: React.FC<CustomizedFormProps> = ({ onChange, fields }) => {
  return (
    <Form
      name="global_state"
      layout="inline"
      fields={fields}
      onFieldsChange={(changedFields, allFields) => {
        onChange(allFields);
      }}
    >
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Username is required!' }]}
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

export class AntdFormTest extends React.Component<{}, {fields: FieldData[]}> {
  
  constructor(props: {}) {
    super(props);
    this.state = {fields: [{name: ['username'], value: 'Ant Design'}]};
  }

  render() {
    return (
      <>
        <CustomizedForm
          fields={this.state.fields}
          onChange={newFields => {
            console.log('onChange fired');
            this.setState({fields: newFields});
          }}
        />
        <pre className="language-bash">{JSON.stringify(this.state, null, 2)}

); }};

Answer 1

Вместо этого вам следует использовать метод onValuesChange. onFieldsChange запускается, когда поле обновляется (повторно отображается). Подробнее см. Здесь: https://ant.design/components/form/#API

Здесь объясняется, когда следует использовать метод OnFieldsChange