javascript - 使用 Input html 在 ReactJS 中的搜索栏 UI

Question

我如何制作这种 UI，在其中我从 api 在 React 中输入搜索/输入类型的内容，我使用 axios 来获取数据，并且我也使用了取消令牌。它也可以根据我的结果进行调整，假设我的api给我一个10的数组，所以它会扩展，如果给我5，那么它会压缩。

 var CancelToken = axios.CancelToken;
  var cancel;

  function handleResult(value) {
    if (cancel !== undefined) {
      cancel();
    }
    axios
      .get(
        `https://example.com/search`,
        {
          cancelToken: new CancelToken(function executor(c) {
            // An executor function receives a cancel function as a parameter
            cancel = c;
          }),
          params: {
            q: value,
          },
        }
      )
      .then((response) => {
        console.log(response.data.hits.hits);
        setList(response.data.hits.hits);
      })
      .catch((error) => {
        console.log(error);
      });
  }

我怎样才能做到这一点？

标签： javascriptnode.jsreactjsuser-interfaceaxios