每次按键都会调用 api答案

【问题标题】：api call with every key stroke每次按键都会调用 api
【发布时间】：2020-10-25 07:23:12
【问题描述】：

我试图创建这个反应网站，我可以在其中搜索一个地方。我遇到问题，因为每当我在搜索框中输入新字母时，都会调用 api，这会使网站变得非常慢。我不希望它在每次击键时调用 api。我认为这是因为第二个 useEffect 但如果我删除该 useEffect 则搜索结果中不会显示任何结果。我该如何解决这个问题。在类组件中，我认为我们可以使用 componentDidUpdate 来做到这一点，但在这里我使用了 useEffect 但没有得到想要的结果。

这是代码

App.js

  useEffect(() => {
    getItems();

    if (finalSearch) {
      filterData();
    } else {
      handleRequest();
    }
  }, [search, finalSearch]);

【问题讨论】：

你已经描述了这个问题，但你还没有解释你想做什么来解决它。您希望多久调用一次 API？
只有一次。然后将结果保存在数据权中。所以我想从那里进行搜索，而不是每次击键都进行 api 调用，因为它让它变慢了
除了提供指向 CodeSandBox 的链接外，请在此处发布与您的问题相关的代码。
好的先生，我现在就这样做
听起来您想要解除 API 调用的抖动，直到用户停止绑定。

标签： reactjs react-hooks

【解决方案1】：

看起来你在开始时调用了 api，然后一旦搜索组件有值，你就过滤数据。

如果您想在每次击键时停止获取 API，只需删除 useEffect 中的 else 子句即可。

  useEffect(() => {
    getResults();

    if (finalSearch) {
      filterData();
    }
  }, [search, finalSearch]);

【讨论】：

哇，成功了。如果我想让它成为一个渐进式网络应用程序怎么办？如何缓存数据？你有什么想法