我尝试使用 navigation.navigate() 从主屏幕导航到详细屏幕。当我第一次单击按钮导航时它工作正常,但之后当我从详细信息返回主页并单击另一个项目以查看详细信息时,详细信息屏幕上的参数没有更改(它仍然是第一次单击的参数)。这是我的代码:
<TouchableNativeFeedback
key={index}
onPress={() => {
navigation.navigate('PenghuniScreen', {
screen: 'DetailPenghuni',
params: {
penghuni: item,
},
});
}}></TouchableNativeFeedback>;
item 是 map loop 中的对象。我尝试使用 react 导航 usefocuseffect 控制台日志,并且在第一次单击后参数不会改变。useFocusEffect(
React.useCallback(() => {
console.log('My params:', route.params.penghuni);
setPenghuni(route.params.penghuni);
return () => {
// source.cancel('Api Canceled');
console.log('tutup detail penghuni');
};
}, []),
);
有人对此有解决方案吗?
最佳答案
您忘记添加 route
对您的 useCallback
的依赖,所以它正在获取旧值。
尝试添加 [route]
:
React.useCallback(() => {
console.log('My params:', route.params.penghuni);
setPenghuni(route.params.penghuni);
return () => {
// source.cancel('Api Canceled');
console.log('tutup detail penghuni');
};
}, [route]),
我建议您添加 eslint Hook 到您的项目,以检测缺少的依赖项。观察 : 为什么不通过导航参数传递这些值而不是使用
useFocusEffect
?navigation.navigate('DetailPenghuni', { penghuni: item1 }) // item1 press
navigation.navigate('DetailPenghuni', { penghuni: item2 }) // item2 press
如果您需要取消某些内容,您可以随时使用 useEffect clean callback关闭屏幕时自动调用。
关于javascript - React Native navigation.navigate 参数未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64186894/