Question

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

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

    return unsubscribe;
  }, [navigation]);

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

<块引用>

一个效果函数除了一个函数之外不能返回任何东西，它用于清理。你返回：[object Object]

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

我使用的是导航 V4

Answer 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/

Answer 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

Answer 3

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

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

您的代码应如下所述更新

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

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

如何在 useEffect 中使用 addListener

3 个答案: