Save Data按钮点击后API未立即执行,需触发其他UI操作才完成的问题求助
Save Data按钮点击后API未立即执行,需触发其他UI操作才完成的问题求助
大家好,我遇到了一个非常诡异的问题,想请各位帮忙排查下:
我开发的界面里有个「Save Data」按钮,点击它本应立刻触发下面代码里的sendEsevaKendraData异步函数来发起API请求,但实际情况是,点击按钮后API调用好像卡住了,完全没动静,只有当我去点击另一个UI元素(比如页面上的「Court Complex」按钮)之后,这个API请求才会突然完成。
我已经确认过API调用的逻辑本身是正确的,但就是第一次点击「Save Data」按钮时不按预期立即执行。下面是相关的代码片段:
const sendEsevaKendraData = async () => { console.log("Clicked Save with:", { selectedItem, imageUri, latitude, longitude }); if (!selectedItem || !imageUri || !latitude || !longitude) { ToastAndroid.show('Incomplete data. Please complete all steps.', ToastAndroid.LONG); return; } setLoadingSave(true); setTimeout(async () => { try { const esevaId = selectedItem.eseva_id; const imageName = `${esevaId}.jpg`; const fullData = { eseva_id: esevaId, latitude, longitude, filename: imageName, mobile_no: selectedItem.mobile_no ?? '', }; const encrypted = encryptData(fullData); // Assume this returns { data: string } const formData = new FormData(); formData.append('data', encrypted.data); formData.append('img', { uri: imageUri, name: imageName, type: 'image/jpeg', }); const response = await fetch('<API_ENDPOINT>', { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', // 这里我是不是应该去掉这个头,让fetch自动设置boundary? }, body: formData, }); const textData = await response.json(); const json_response = decryptData(textData); if (json_response?.status === 'Y') { Alert.alert('✅ Success', json_response.message); } else { ToastAndroid.show(json_response.message ?? 'Unexpected response', ToastAndroid.LONG); } } catch (err) { console.error("❌ Upload error:", err); Alert.alert('Error', 'Failed to upload data'); } finally { setLoadingSave(false); } }, 0); };
目前我自己有几个疑惑点:
- 手动设置
multipart/form-data请求头会不会有问题?是不是应该去掉这个头,让fetch自动生成带boundary的请求头? - 用
setTimeout(async () => {}, 0)包裹整个请求逻辑,会不会影响异步任务的执行时机,导致它被阻塞了?
希望有经验的朋友能帮我分析下问题出在哪里,谢谢大家!
内容来源于stack exchange
相关产品推荐
相关产品推荐

