Question

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

嗨，我是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调用的顺序？

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

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);
};

有什么方法可以通过频繁调用的API请求来控制useEffect结果吗？

1 个答案: