Javascript 是否有任何方法可以通过频繁调用的API请求控制useEffect结果？

我写了一些代码，根据关键字用户类型返回搜索结果，并希望确保搜索结果应符合用户的最新输入

嗨，我是React中的noob（技术上是在前端）。 我编写了一些代码，根据用户键入的关键字返回搜索结果

如下所示，每次关键字更改时，都会调用useEffect，搜索结果会随着API请求的响应而更新

虽然搜索结果应该和用户的最新输入一致，但目前并没有

问题在于API请求响应时间是可变的，并且不能保证调用order useEffect

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;

例如，尽管用户的最新输入是“Diamond”，但我希望“Diamond”的API响应设置为搜索结果。 然而，“Diamon”或“Diamo”的API响应实际上设置为搜索结果

有没有办法控制useEffect调用的顺序

请询问任何模棱两可的描述。

---

提前谢谢

您可以添加一个超时，以便搜索不会在键入时发生，而是延迟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);
};

---

您可以添加一个超时，以便搜索不会在键入时发生，而是延迟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);
};

我想你应该使用：，

cancelToken

就是为这个而创建的。我想你应该使用：，

cancelToken

就是为这个而创建的。