时间戳

首页 > 解决方案 > 有没有办法通过频繁调用的 API 请求来控制 useEffect 结果？

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

问题描述

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

嗨，我是 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;

例如，如果用户的最新输入是“钻石”，我希望“钻石”的 API 响应设置为搜索结果。但是，“Diamon”或“Diamo”的 API 响应确实设置为搜索结果。

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

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

标签： javascriptreactjsreact-hooks

解决方案

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

推荐阅读