react antd How to prevent multiple submissions of a piece of data

How to prevent multiple submissions of a piece of data?

plan

It is implemented using antd button loading method. After clicking the submit button, first let the button load, wait for the interface to return the result, then do the corresponding processing, and finally remove the loading.

(Of course, disabled can also achieve the same effect. Personally, I suggest using loading, the interaction will be better)

import { Form, Input, Button, Select } from 'antd';

const { Option } = Select;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

class Demo extends  {
  formRef = ();
  // create a flag
  state = {
  	submitLoading = false;
  };
  onGenderChange = value => {
    ({
      note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
    });
  };

  onFinish = values => {
  	// set the flag is true
  	({submitLoading: true}, () => {
  		(values);
  		//after request api, set the flag is false
  		({submitLoading: false});
  	})
    
  };

  onReset = () => {
    ();
  };

  onFill = () => {
    ({
      note: 'Hello world!',
      gender: 'male',
    });
  };

  render() {
	let { submitLoading } = ;
	
    return (
      <Form {...layout} ref={} name="control-ref" onFinish={}>
        <
          name="note"
          label="Note"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </>
        <
          name="gender"
          label="Gender"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            placeholder="Select a option and change input text above"
            onChange={}
            allowClear
          >
            <Option value="male">male</Option>
            <Option value="female">female</Option>
            <Option value="other">other</Option>
          </Select>
        </>
        <
          noStyle
          shouldUpdate={(prevValues, currentValues) =>  !== }
        >
          {({ getFieldValue }) =>
            getFieldValue('gender') === 'other' ? (
              <
                name="customizeGender"
                label="Customize Gender"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input />
              </>
            ) : null
          }
        </>
        < {...tailLayout}>
          <Button type="primary" htmlType="submit" loading={submitLoading}>
            Submit
          </Button>
          <Button htmlType="button" onClick={} loading={submitLoading}>
            Reset
          </Button>
          <Button type="link" htmlType="button" onClick={} loading={submitLoading}>
            Fill form
          </Button>
        </>
      </Form>
    );
  }
}

(<Demo />, mountNode);

React anti-repeated click method and principle

principle

Once the request data starts, the next click cannot be made until the end of the request, otherwise the corresponding prompt will be given

Initial settings in state:

state={
   bool:true,
}

Click event settings:

btn_click = async () => {
	({
	   bool: false,
	})
	.
	.
	.
	if(){
		const value = await ({})
		if ( == 1) {
		
		} else {
		
		}
		({
		bool: true,
		})
	}
}

Analysis

When the bool is true, we execute the request. If multiple clicks occur, the bool:false set at the beginning of the method will take effect to prevent the next request from being made if the request has not been completed;
Then after the request is completed, we change the Bool status more so that this request can be completed and the next request can be made.
As for setting the method to false at the beginning, the request is also executed, which is derived from an asynchronous mechanism. The state is set in the same method and then called again. The state is not available for update, but it will be executed the next time the method is called.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.