إيقاف الطلبات الزائدة في Axios مع الحدث onChange في مكون React؟

إذا كانت خاصية البحث مثل خاصية محرك البحث لجوجل فهي ضروريه لإظهار إقتراحات أو نتائج سريعة للبحث الذي يقوم به المستخدم

إذا انت لا تريد ذلك وتريد فقط أن يكون البحث عندما ينتهي المستخدم من إدخال جملة البحث إذاً لديك العديد من الخيارات:

• إما تجعل مكون React الخاص بالبحث على شكل form واستخدام الحدث onSubmit للحصول على نتائج البحث
• أو يمكنك إضافة إيقونة البحث وعند الضغط عليها بإستخدام الحدث onClick يمكن للمستخدم الحصول على نتائج البحث
• أو عندما يضغط المستخدم على زر Enter بإستخدام الحدث onKeyPress والقيام بإستخدم if الشرطية للتأكد من أن الزر المضغوط هو enter من خلال إذا كان event.keyCode === 13
• أو يمكنك إستخدام الدالة setTimeout عندما يتم إستدعاء onChange يتم إستدعاء دالة setTimeout والذي بدورها تقوم بإستدعاء دالة إرسال الطلب الى الخادم بعدما يتوقف المستخدم عن الكتابة لمدة ثانية على سبيل المثال
• أو يمكنك إستخدام أكثر من طريقة من الطرق السابقة لحصول على تجربة مستخدم جيدة

يمكن تطبيق مفهوم debounce بحيث ننتظر توقف المستخدم عن الكتابة لبضع أجزاء الثانية قبل تنفيذ الاستعلام

ستكون الشيفرة بهذا الشكل: حيث سننتظر مرور الوقت wait حتى ننفذ الطلبية

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

يمكن أن تجد مثال كامل من هنا

كما يمكن استعمال  awesome-debounce-promise كالتالي:

حيث تأخذ معاملين الأول هو دالة الاتصال مع API والثاني هو الوقت المنتظر..

const searchAPI = text => fetch('/search?text=' + encodeURIComponent(text));

const searchAPIDebounced = AwesomeDebouncePromise(searchAPI, 500);

class SearchInputAndResults extends React.Component {
  state = {
    text: '',
    results: null,
  };

  handleTextChange = async text => {
    this.setState({ text, results: null });
    const result = await searchAPIDebounced(text);
    this.setState({ result });
  };
}

حل آخر هو useCallback' react hook': نفس المبدأ

import React, { useCallback } from "react";
import { debounce } from "lodash";

const handler = useCallback(debounce(someFunction, 2000), []);

const onChange = (event) => {
    // perform any event related action here

    handler();
 };