这段代码是我面临的问题的一个例子。
import {useEffect} from 'react';
import {Pressable, Text} from 'react-native';
function page1() {
useEffect(() => {
console.log(1); 1️⃣
return () => {
console.log(2); 2️⃣
};
}, []);
return (
<Pressable onPress={() => navigation.navigate('page1')}>
<Text>BUTTON</Text>
</Pressable>
);
}
function page2() {
useEffect(() => {
console.log(3); 3️⃣
return () => {
console.log(4); 4️⃣
};
}, []);
return (
<Pressable onPress={() => navigation.goBack()}>
<Text>BUTTON</Text>
</Pressable>
);
}
当屏幕从第页1移动到第页2时,我希望它按以下顺序运行
1️⃣ console.log(1); // when on page1
2️⃣ console.log(2); // When leaving page1
3️⃣ console.log(3); // when on page2
4️⃣ console.log(4); // when leaving page2
然而,实际结果如下
1️⃣ console.log(1); // when on page1
❓ Nothing happens // When leaving page1
3️⃣ console.log(3); // when on page2 ❓
2️⃣ console.log(2); // When on page2 ❓
4️⃣ console.log(4); // when exiting page2
第二步和第三步正在颠倒。页面1上的useEffet返回逻辑正在页面2上运行并影响它。
有什么好办法解决这个问题吗?
1条答案
按热度按时间wnavrhmk1#
这就是实际发生的事情:
1,3,4
setup
函数(1)在添加page1
时被调用*导航至第2页
page2
时,调用setup
函数(3)*回去
page2
时,调用cleanup
函数(4)page1
永远不会被删除,因此不会调用cleanup
函数(2)查看useEffect的详细信息。
使用useFocusEffect来检测页面何时进入焦点以及何时离开焦点。
一,三,二,四,一
page1
成为焦点时,setup
函数(1)被调用*导航至第2页
setup
函数(3)在page2
成为焦点时被调用cleanup
函数(2)在page1
失焦时调用*回去
cleanup
函数(4)在page2
失焦时调用setup
函数(1)在page1
进入焦点时被调用