返回屏幕时未在 React Native 中调用 useEffect

Question

你好吗。这是这个问题的场景。假设有 2 个屏幕使其变得简单。

1. 进入A画面。 useEffect of A screen 调用。
2. 从 A 屏幕导航到 B 屏幕
3. 从 B 导航回 A 屏幕。此时，未调用 useEffect。

    function CompanyComponent(props) {

      const [roleID, setRoleID] = useState(props.user.SELECTED_ROLE.id)

      useEffect(()=>{

    // this called only once when A screen(this component) loaded,
    // but when comeback to this screen, it doesn't called
      setRoleID(props.user.SELECTED_ROLE.id)
    }, [props.user])
   }

所以再次回到 A 屏幕时，屏幕 A 的更新状态保持不变（不从道具加载）

我没有更改屏幕 B 中的 props.user。但我认为 const [roleID, setRoleID] = useState(props.user.SELECTED_ROLE.id) 至少应该调用这一行。

我正在使用 redux-persist。我认为这不是问题。对于导航，我使用这个

// to go first screen A, screen B
function navigate(routeName, params) {
    _navigator.dispatch(
        NavigationActions.navigate({
            routeName,
            params,
        })
    );
}
// when come back to screen A from B
function goBack() {
    _navigator.dispatch(
        NavigationActions.back()
    );
}

屏幕出现时我可以使用任何回调吗？我的代码有什么问题？

谢谢

原文由 Nomura Nori 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React Navigation 5 提供了一个 useFocusEffect 钩子，类似于 useEffect，唯一的区别是它仅在屏幕当前聚焦时运行。检查文档 https://reactnavigation.org/docs/use-focus-effect

  useFocusEffect(
    useCallback(() => {
      const unsubscribe = setRoleID(props.user.SELECTED_ROLE.id)
      return () => unsubscribe()
    }, [props.user])
  )

原文由 Francisco Gallo M. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

以下解决方案对我有用：

 import React, { useEffect } from "react";
import { useIsFocused } from "@react-navigation/native";

const ExampleScreen = (props) => {
    const isFocused = useIsFocused();

    useEffect(() => {
        console.log("called");

        // Call only when screen open or when back on screen
        if(isFocused){
            getInitialData();
        }
    }, [props, isFocused]);

    const getInitialData = async () => {}

    return (
        ......
        ......
    )
}

我用过反应导航 5+

@react-navigation/native”: “5.6.1”

原文由 Nitesh Tosniwal 发布，翻译遵循 CC BY-SA 4.0 许可协议