在工作中经常会遇到频繁请求接口但是接口返回速度不同导致先请求的后返回,搜索的结果就不是预期。比如说搜索。
可以利用useEffect来解决这个问题。
useEffect(() => {
let didSearch = false;
if (text) {
dispatch
({
type: 'search/fundSearchApp',
payload: { input: text, pageSize: 20, isQueryPerformance: true }
}).then(res => {
if (!didSearch) {
setSearchList(res.searchList)
setCurrent(res.current)
setTotal(res.total)
}
});
} else {
setSearchList([]);
setCurrent(1);
setTotal(0);
}
return () => {
didSearch = true;
}
}, [text])
定义一个字段didSearch利用JS的闭包,每次都是不同的变量,在下一次text变化完成,useEffect会再次执行(渲染页面再去调用return方法再去执行useEffect),如果接口没有返回重新渲染了标识会改变使更新逻辑不再执行。