每次击键都会调用 api

IT技术 reactjs react-hooks
2021-05-27 04:13:19

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

这是代码

应用程序.js

  useEffect(() => {
    getItems();

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

 
1个回答

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

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

  useEffect(() => {
    getResults();

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