reactjs - 从搜索 API 获取项目的最佳方式是什么？

Question

我有一个 React 应用程序，它使用 Github 搜索 API 获取 Github 存储库，函数如下所示；

 const searchEverything = (input: string) => {
    if (input.length > 2) {
      setSearchPageStatus(true);
      fetch(`https://api.github.com/search/repositories?q=${input}`)
        .then((res) => res.json())
        .then((data) => {
          setRepoCount(data.total_count);
          setRepos(data.items);
        });

      fetch(`https://api.github.com/search/users?q=${input}`)
        .then((res) => res.json())
        .then((data) => {
          setUserCount(data.total_count);
          setUsers(data.items);
        });
    } else {
      setSearchPageStatus(false);
    }
  };

所以我得到这样的“onChange”属性的项目；

<input onChange={(e) => searchEverything(e.target.value)}
       type="search"
       className="header__search__input"
        placeholder="Search..."
        />

我没有收到错误或类似的东西。但是正如您在每个按键上看到的那样，都有一个 API 调用，我觉得它效率不高，如果您的单词很长，可能会出现错误 403。那么有没有更好的方法来使用这个 API 呢？我认为的解决方案只是放一个按钮并在点击后进行搜索，但这只会带走所有的活力。

标签： reactjsapigithub

Answer 1

您可以使用throttle或debounce来限制调用函数的次数。

你不需要使用_，如果你愿意，可以自己写。