Javascript React实时搜索获取API

我需要对电影进行搜索输入，我需要进行现场搜索。 它需要在用户输入3个字符后一秒钟后触发。

---

如何使用功能组件实现此功能？

使用自定义挂钩，可以通过以下方式实现：

import React，{useState}来自“React”；
进口{
使用异步回调，
E_REASON_已卸载，
取消错误
}来自“use-async-effect2”；
从“c-promise2”导入{CPromise}；
从“cp axios”导入cpAxios；
导出默认函数TestComponent（道具）{
const[text，setText]=useState（“”）；
const handleSearch=useAncyncCallback(
功能*（事件）{
const{value}=event.target；
if（value.length<3）返回；
收益率c减少延迟（1000）；
setText（“搜索…”）；
试一试{
常数响应=收益率(
`https://rickandmortyapi.com/api/character/?name=${value}`
).超时（道具超时）；
setText（response.data？.results？.map（（{name}）=>name.join（“，”）；
}捕捉（错误）{
取消错误。重试（错误，原因为卸载）；
setText（err.response？.status==404？“未找到”：err.toString（）；
}
},
{cancelPrevious:true}
);
返回(
UseAncyncCallback演示：Rickandmortyapi宇宙角色搜索
字符名：
{text}
取消请求
);
}

---

此代码已处理取消先前搜索序列（包括中止请求）以及在卸载组件时取消序列的操作，以避免出现React泄漏警告。

请共享一些代码

import React, { useState } from "react";
import {
  useAsyncCallback,
  E_REASON_UNMOUNTED,
  CanceledError
} from "use-async-effect2";
import { CPromise } from "c-promise2";
import cpAxios from "cp-axios";

export default function TestComponent(props) {
  const [text, setText] = useState("");

  const handleSearch = useAsyncCallback(
    function* (event) {
      const { value } = event.target;
      if (value.length < 3) return;
      yield CPromise.delay(1000);
      setText("searching...");
      try {
        const response = yield cpAxios(
          `https://rickandmortyapi.com/api/character/?name=${value}`
        ).timeout(props.timeout);
        setText(response.data?.results?.map(({ name }) => name).join(","));
      } catch (err) {
        CanceledError.rethrow(err, E_REASON_UNMOUNTED);
        setText(err.response?.status === 404 ? "Not found" : err.toString());
      }
    },
    { cancelPrevious: true }
  );

  return (
    <div className="component">
      <div className="caption">
        useAsyncCallback demo: Rickandmortyapi universe character search
      </div>
      Character name: <input onChange={handleSearch}></input>
      <div>{text}</div>
      <button className="btn btn-warning" onClick={handleSearch.cancel}>
        Cancel request
      </button>
    </div>
  );
}