异步搜索promise不按顺序解析

Question

我这里的问题是，获取promise在当前文本之前创建了几个字符，然后在最后创建的promise之后解析。我需要解决的最后一个promise的最新或取消以前的promise时，我改变了文本。

我希望结果总是最新的。

我查找了一些搜索栏示例，但什么也没找到。

我很确定解决方案是保存以前的promise，如果在你创建一个新promise时它仍然悬而未决，就取消它，但是我不知道如何取消promise。

谢谢帮忙。

import React, {useEffect, useState, Fragment} from "react";

function TestComponent () {
    const [text, setText] = useState('');
    const [results, setResults] = useState([]);
    
    useEffect(() => {
        (async () => {
            await getResults();
        })();
    }, [text]);
    
    async function getResults() {
        let resultsFromFetch = await fetch('url');
        resultsFromFetch = await resultsFromFetch.json();
        setResults(resultsFromFetch);
    }
    
    function onChange(evt) {
        setText(evt.target.value);
    }
    
    return (
        <Fragment>
            <input type="text" value={text} onChange={onChange}/>
            {results.map((value, index) => {
                return <p key={index}>{value}</p>;
            })}
        </Fragment>
    );
}

export default TestComponent;

注意：在我遇到的实际问题中，我没有使用fetch，而只是一个异步indexeddb操作。

Answer 1

我找到了一个答案，它并没有真正取消promise，但它停止了函数设置结果。

添加一个额外的状态变量：const[取消令牌，set取消令牌]=useState（null）；

更改效果：

useEffect(() => {
    if (cancelToken) {
        cancelToken.cancel(); // execute the cancel function of the previous search
    }

    let newCancelToken = {}; // create an empty object to pass into the getResults function

    getResults(cancelToken);

    setCancelToken(newCanelToken); // change the state variable to the new cancel token
}, [text]);

更改getResults函数：

async function getResults(newCancelToken) {
    let canceled = false; // create a local canceled variable
    newCancelToken.cancel = () => {
        canceled = true; // change it to true when the cancel function is called
    };
    let resultsFromFetch = await fetch('url');
    resultsFromFetch = await resultsFromFetch.json();

    if (!canceled) {
         setResults(resultsFromFetch); // only change the state if it is not canceled
    }
   
}