通过闭包解决ReactHook中接口请求的时序问题

鍏堢湅涓€涓畝鍗曠殑鍦烘櫙//app.tsxconstApp=()=>{const[num,setNum]=useState(1);const[list,setList]=useState([]);useEffect(()=>{getDataImmediate(num).then(setList);},[num]);return(

);};//api.tsexportconstgetDataImmediate=(num)=>{returnnewPromise((resolve)=>resolve([num,num]));};鐐瑰嚮鎸夐挳锛岃皟鐢╣etDataImmediate妯℃嫙ajax璇锋眰锛屼紶鍏umber锛宲romise绔嬪嵆杩斿洖鏁扮粍锛岀劧鍚庢樉绀哄湪椤甸潰涓娿€傜粨鏋滃拰棰勬湡鐨勪竴鏍凤紝鐐瑰嚮n锛宯锛宯浼氭樉绀哄嚭鏉ャ€備絾鏄紝杩欎釜閫昏緫涓殣钘忕潃涓€涓緢娣辩殑闂锛岄渶瑕佽€冭檻銆俫etDataImmediate妯℃嫙鐨勬槸缃戠粶璇锋眰锛屾墍浠ユ湁涓€涓€楁椂鐨勯棶棰樸€傚鏋滃洜涓哄悇绉嶅師鍥狅紝鎴戜滑鍦╱seEffect涓皟鐢ㄤ簡涓ゆ鎺ュ彛锛屽彲鑳戒細鍑虹幇绗竴娆°€傜涓€娆¤姹傝繑鍥炴瘮绗簩娆¤姹傛參锛屾墍浠ラ〉闈㈡樉绀烘湁闂銆傛ā鎷熸帴鍙ｈ姹傦紝濂囨暟娆?00ms杩斿洖锛屽伓鏁版1500ms杩斿洖//app.tsxconstApp=()=>{const[num,setNum]=useState(1);const[list,setList]=useState([]);useEffect(()=>{getDataRandomTime(num).then(setList);},[num]);return(

{list?.join(',')}
{setNum(num+1);}}>鍒锋柊
鐐瑰嚮:{num}

);};//api.tsletn=1;exportconstgetDataRandomTime=(num:number)=>{n++;returnnewPromise((resolve)=>{setTimeout(()=>{resolve([num,num]);},n%2?500:1500);});};鍑虹幇杩欎釜闂锛屽彧瑕佹垜杩炵画鐐瑰嚮涓夋锛岃偗瀹氭槸涓嶆纭殑锛宺eact瀹樻柟鏂囨。涓粰鍑轰簡杩欎釜闂鐨勮В鍐虫柟娉曘€備篃鏈変竴浜涙垚鐔熺殑鏂规閫氳繃涓€涓猧gonre鍙橀噺鏉ユ帶鍒剁ぞ鍖猴紝姣斿react-query锛宎hooks绛夛紝鍙槸涔嬪墠涓嶇煡閬擄紒锛侊紒鑷繁閫氳繃姝棬閭亾瑙ｅ喅浜嗘垜鐨勮В鍐虫柟妗坋xportfunctionapiWrapper(fn){letid=1;杩斿洖寮傛锛堝弬鏁帮級=>{id++;const_id=id;璁﹔es=awaitfn(params);濡傛灉锛坃id===id锛墈杩斿洖璧勬簮锛泒else{鎶涘嚭鏂扮殑閿欒锛堬級锛泒};}杩欏緢绠€鍗曪紝瀵瑰惂锛熻褰曢€氳瘽娆℃暟銆傛帴鍙ｈ繑鍥炴椂锛屽垽鏂綋鍓峣d鏄惁绛変簬id鐨勬渶澶у€硷紝鍗充负鏈€鏂拌皟鐢ㄣ€傚鏋滃畠浠笉鐩哥瓑锛屽垯鎶涘嚭寮傚父銆傜幇鍦ㄥ氨瀹屽叏娌℃湁闂浜嗮煄夝煄夝煄夝煄夊湪绾夸綋楠岋細https://stackblitz.com/edit/r...