有没有办法通过频繁调用的 API 请求来控制 useEffect 结果？答案

【问题标题】：Is there any way to control the useEffect result with API request which is frequently invoked?有没有办法通过频繁调用的 API 请求来控制 useEffect 结果？
【发布时间】：2019-12-08 21:36:00
【问题描述】：

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

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

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

虽然搜索结果应该与用户最新的输入一致，但目前不是。

问题是API请求响应时间是可变的，不能保证调用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 调用的顺序吗？

请询问任何模棱两可的描述。提前致谢！

【问题讨论】：

我认为你应该使用：github.com/axios/axios#cancellation，cancelToken 正是为此而创建的。

标签： javascript reactjs react-hooks

【解决方案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);
};

【讨论】：