こんにちは！
今回は「ボタン連打によるaxios処理の複数送信を防止」する方法について、お伝えしたいと思います。
普通にボタンのonclick時の処理の実装すると、ボタン連打が可能になってしまいます。
特にボタンクリック時にaxiosでDBにデータをインサートする場合、データの不整合が発生することがあるので、対策が必要になりました。
対策：axios処理の前にボタンを非活性にする
こちら実装例になります。
HTML
<button>
送信
</button>Javascript
const sendData = (btn) => {
btn.disabled = true;
}
これでボタン連打が防止できました。
※buttonタグ以外（pタグやdivタグなど）で同じように記述してもうまく動作しないので、注意が必要です！
具体的には以下のような書き方です。
HTML
<div>送信</div>Javascript
const sendData = (btn) => {
btn.disabled = true;
}
これだと、disableが効かず、ボタン連打ができてしまいます。
以上、お疲れさまでした！🍵