React Native navigation.navigate 参数未更新

Question

我尝试使用 navigation.navigate() 从主屏幕导航到详细信息屏幕。 当我第一次单击按钮导航时它工作正常，但之后当我从细节返回主页并单击另一个项目以查看细节时，细节屏幕上的参数没有改变（它仍然是第一次点击的参数）。 这是我的代码：

<TouchableNativeFeedback
  key={index}
  onPress={() => {
    navigation.navigate('PenghuniScreen', {
      screen: 'DetailPenghuni',
      params: {
        penghuni: item,
      },
    });
  }}></TouchableNativeFeedback>;

item 是来自 map loop 的对象。 我尝试使用反应导航 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');
      };
    }, []),
  );

有人对此有解决方案吗？

Answer 1

您忘记将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 for hooks 添加到您的项目中，以检测丢失的依赖项。

观察：为什么不通过导航参数传递这些值而不是使用useFocusEffect ？

navigation.navigate('DetailPenghuni', { penghuni: item1 }) // item1 press 
navigation.navigate('DetailPenghuni', { penghuni: item2 }) // item2 press

如果您需要取消某些内容，您可以随时使用关闭屏幕时自动调用的useEffect clean 回调。

Answer 2

你可以直接使用route.params.penghuni而不是设置setPenghuni(route.params.penghuni)

useEffect(() => {
      console.log('My params:', route.params.penghuni);
      // setPenghuni(route.params.penghuni); 
      return () => {
        // source.cancel('Api Canceled');
        console.log('tutup detail penghuni');
      };
}, [route.params?.penghuni]),