如何解决异步搜索承诺不会按顺序解决
我的问题是,获取承诺会在创建的几个字符之前创建一个字符,而当前文本会先解析,然后再创建最后一个承诺。 更改文字时,我需要最后一个承诺才能得到最新的解决,或者取消以前的未决承诺。
我希望结果总是最新的。
我查找了一些搜索栏示例,但找不到任何内容。
我非常确定解决方案是保存先前的承诺,如果在创建新的承诺时仍未决,则取消它,但是我不知道如何取消承诺。
感谢您的帮助。
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;
注意:在实际问题中,我不使用访存而是仅使用异步indexeddb操作。
解决方法
我找到了答案,它并没有真正取消承诺,但是会阻止功能设置结果。
添加一个额外的状态变量:const [cancelToken,setCancelToken] = 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
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。