我有一個名為 sendResults() 的方法，它進行 API 呼叫并執行一些陣列操作。當我使用“普通”TouchableOpacity 按鈕呼叫該方法時，一切正常。但是，當我使用放置在 App Stack 標頭中的按鈕呼叫它時，該方法無法正確運行。感覺像是一個異步問題（？）但不確定......
這是兩個按鈕的代碼。
<TouchableOpacity
onPress={() => {
sendResults(); // works fine
}}
style={styles.buttonStyle}
>
<Text>Save</Text>
</TouchableOpacity>
useEffect(() => {
navigation.setOptions({
headerRight: () => (
<TouchableOpacity
onPress={() => {
sendResults(); // doesn't work
}}
style={styles.buttonStyle}
>
<Text>Save</Text>
</TouchableOpacity>
),
});
}, []);
編輯：sendResults() 代碼
// Shows alert confirming user wants to send results to API
const sendResults = () => {
Alert.alert("Save Results", "Alert", [
{
text: "Save & Quit",
onPress: () => postNumsAndNavigate(),
style: "destructive",
},
{ text: "Cancel", onPress: () => console.log("") },
]);
};
// Save Results button
const postNumsAndNavigate = async () => {
if (bibNums.length == 0) {
alert("You have not recorded any results. Please try again.");
} else if (bibNums.filter((entry) => entry == "").length > 0) {
alert("Blank");
} else {
console.log("\n" bibNums);
await postNums();
AsyncStorage.setItem(`done`, "true");
navigation.navigate("Home Screen");
}
};
postNums() 執行 API 呼叫。
編輯 2: bibNums 宣告
const [bibNums, setBibNums] = useState([]);
uj5u.com熱心網友回復：
您只設定導航按鈕的處理程式一次，因為您的 useEffect 沒有任何依賴項；它僅在安裝組件時運行，它捕獲sendResults. sendResults每次都在變化postNumsAndNavigate和bibNums變化。添加sendResults到依賴項陣列以在每次sendResults更改時更新導航按鈕處理程式。
useEffect(() => {
...
}, [sendResults])
它適用于 ，TouchableOpacity因為您正在為每個渲染分配處理程式。
onPress={() => {sendResults()}}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/354409.html