如何在 useEffect 中使用 addListener答案

【问题标题】：How to use addListener in useEffect如何在 useEffect 中使用 addListener
【发布时间】：2021-03-12 21:02:33
【问题描述】：

我想在焦点屏幕时运行方法，我用这个：

 useEffect(() => {
  const unsubscribe =  navigation.addListener('focus', () => {
      console.log(
        'test'
      );
    });

    return unsubscribe;
  }, [navigation]);

但它不起作用。它给出了这样的错误： *

效果函数不能返回除函数之外的任何内容，用于清理。你返回了：[object Object]

即使我没有返回任何东西，console.log( '测试' ) 不工作

我正在使用导航 V4

【问题讨论】：

这正是它应该的样子。这是完整的代码吗？
是的，它给出了那个错误，我真的不明白为什么。 Console.log 永远不会触发

标签： react-native

【解决方案1】：

这行得通吗？

import { useFocusEffect } from '@react-navigation/native';
  ......
  useFocusEffect(useCallback(() => {
  ......
   console.log(something)
 }, [something]));

 //-------

如果不检查反应导航是否配置正确。

更新

在 React 导航 4.x 中，您必须遵循本指南中的一种方法 https://reactnavigation.org/docs/4.x/function-after-focusing-screen/

【讨论】：

哦，它说：看起来您正在尝试使用 React Navigation 5 API，但安装了 React Navigation 4。我应该升级吗？如果我这样做，我可以从其他屏幕得到错误吗？
但我使用上下文，我该如何在上下文中做到这一点

【解决方案2】：

要让useEffect 正常工作，流程如下：

在最后的方括号中添加一个触发动作的变量。在您的情况下，它仅在第一次运行时触发，并且在 navigation 变量更改时触发
您应该在useEffect 中运行您的函数。您只在 useEffect 的主体中定义了一个常量，但您从未运行它。
您可以选择在运行结束时返回function。此函数仅在组件卸载时触发，用于避免内存泄漏。

基于此：我不确定您要实现什么（从您的原始帖子中不清楚），但这可能是您想要的：

useEffect(() => {
    navigation.addListener('focus', () => {
      console.log(
        'test'
      );
    });
    
    const unsubscribe = () => navigation.removeListener('focus'); // !!! I'm not sure about this one, check the docs how to unsubscribe !!!

    return unsubscribe;
  }, [navigation]); // << triggers useEffect

【讨论】：

【解决方案3】：

假设您使用的是最新版本的 react-navigation，您必须使用 use-focus-effect。

https://reactnavigation.org/docs/use-focus-effect/

您的代码应按如下所述进行更新

useFocusEffect(
  useCallback(() => {
    const unsubscribe = () => {
      console.log("test");
    }

    return () => unsubscribe();
  }, [userId])
);

【讨论】：