时间戳

首页 > 解决方案 > 如何在搜索期间取消较早的获取请求并保留最后一个

reactjs - 如何在搜索期间取消较早的获取请求并保留最后一个

问题描述

const controller = new AbortController()
const signal = controller.signal
const Search = ({ searchSuggestion }) => {
    const onkeychange = async (e) => {
        controller.abort()
        let string = e.target.value
        const suggest = await getSearchSuggestion({
            string,
            signal,
        })

    }
    return (
        <input
            type="text"
            autoComplete="off"
            placeholder="Search"
            onChange={onkeychange}
        />
    )
}

此取消请求代码。问题是，它取消了所有请求。虽然我只想取消早期击键的请求。并保持最后一个请求有效。

标签： reactjs

解决方案

您在所有请求中使用相同的控制器/信号，您可以像这样保存以前的控制器：

const Search = ({ searchSuggestion }) => {
    const previousController = useRef();
    const onkeychange = async (e) => {
        if (previousController.current) {
          previousController.current.abort();
        }
        let string = e.target.value
        const controller = new AbortController()
        const signal = controller.signal
        previousController.current = controller;
        const suggest = await getSearchSuggestion({
            string,
            signal,
        })

    }
    return (
        <input
            type="text"
            autoComplete="off"
            placeholder="Search"
            className="search"
            onChange={onkeychange}
        />
    )
}

推荐阅读