是否有任何方法可以使用经常调用的API请求来控制使用效果结果

Question

我编写了一些代码，这些代码按关键字用户类型返回搜索结果，并且要确保搜索结果应符合用户的最新输入。

嗨，我是React中的菜鸟(从技术上讲(。我编写了一些代码，这些代码是按关键字用户键入的返回搜索结果。

如下所示，每当关键字已更改时，使用使用效率，并与API请求的响应一起更新搜索结果。

尽管搜索结果应与用户的最新输入相符，但目前却不是。

问题是API请求响应时间是可变的，并且不能保证调用订单使用效应。

import { useState, useEffect } from 'react';
import axios from 'axios';
const useSuggestions = () => {
  //user's input, 'keyword' for search
  const [query, setQuery] = useState('');
  //search results which renders on browser
  const [suggestions, setSuggestions] = useState([]);
  useEffect(() => {
    let didCancel = false;
    const fetchSuggestions = async word => {
      if (!didCancel) {
        const response = await axios.get(`/api/autocomplete?keyword=${word}`).catch(e => {
          console.error(e);
          return [];
        });
        setSuggestions(response.data);
      }
    };
    fetchSuggestions(query);
    return () => {
      didCancel = true;
    };
  }, [query]);
  const handleChange = e => {
    setQuery(e.target.value);
  };
  return {
    suggestions,
    handleChange,
  };
};
export default useSuggestions;

例如，尽管用户的最新输入是"钻石"，但我希望"钻石"的API响应将设置为搜索结果。但是，" diamon"或" diamo"的API响应确实设置为搜索结果。

有什么方法可以控制使用效应调用的顺序？

请要求任何模棱两可的描述。预先感谢！

Answer 1

您可以添加超时，以便不会在输入时进行搜索，而是延迟1或2秒。也许这样的事情会有所帮助：

将其添加到您的代码：

var timeout = null;
function delayedFetch(val) {
  if (timeout) {  
    clearTimeout(timeout);
  }
  timeout = setTimeout(function() {
     setQuery(val);
  }, 2000);
}

并将您的handleChange功能更新为

const handleChange = e => {
   delayedFetch(e.target.value);
};