我想在通過navigation.navigate().
假設用戶導航到A螢屏并設定了某種狀態，然后他們單擊該螢屏上的按鈕并B通過navigation.navigate('B);`導航到螢屏
當用戶單擊另一個按鈕回傳A螢屏（再次通過navigation.navigate('A');）時，我遇到的問題就會出現。此時的A組件仍保持其初始掛載的所有狀態。我希望將狀態重置為A組件的初始狀態，以便用戶必須從頭開始重新開始任何程序。
有沒有辦法做到這一點？我嘗試了一半的方法來監聽導航回傳并用一堆set鉤子重置狀態，但感覺不對并且效果不佳。
編輯：
有人要求提供代碼示例，因此下面是一個快速示例。問題是; 如果有人導航到組件A并單擊呼叫setInput使文本出現在按鈕上方的按鈕，則他們然后單擊標記為Go To B反應導航將它們帶到組件的另一個按鈕B。如果他們繼續并單擊Go To A然后導航回組件A，則組件A的input狀態仍將等于Hello。我希望它被重置回一個空字串（希望不必呼叫setInput("").
import React, { useState } from "react";
import {Center, Button, Text} from "native-base";
const A = ({ route, navigation }) => {
const [input, setInput] = useState("");
return (
<Center>
<Text>{input}</Text>
<Button onPress=(() => { setInput("Hello") })>Click Me For Words</Button>
<Button onPress=(() => { navigation.navigate("B") })>Go To B</Button>
</Center>
);
};
const B = ({ route, navigation }) => {
return (
<Center>
<Button onPress=(() => { navigation.navigate("A") })>Go To A</Button>
</Center>
);
};
uj5u.com熱心網友回復：
你可以試試這個，它將設定setInput("")，當你回來screen A 的screen B
useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
setInput("");
});
return unsubscribe;
}, [navigation]);
import React, { useState, useEffect } from "react";
import {Center, Button, Text} from "native-base";
const A = ({ route, navigation }) => {
const [input, setInput] = useState("");
useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
setInput("");
});
return unsubscribe;
}, [navigation]);
return (
<Center>
<Text>{input}</Text>
<Button onPress=(() => { setInput("Hello") })>Click Me For
Words</Button>
<Button onPress=(() => { navigation.navigate("B") })>Go To B</Button>
</Center>
);
};
const B = ({ route, navigation }) => {
return (
<Center>
<Button onPress=(() => { navigation.navigate("A") })>Go To A</Button>
</Center>
);
};
uj5u.com熱心網友回復：
你可以像這樣呼叫 React Native 生命周期方法：
componentDidMount() {
console.log('onResume')
//call your method here
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/353532.html