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

你好。 这就是这个问题的场景。 让我们假设有两个屏幕来简化它

进入一个屏幕。使用名为的屏幕效果

从屏幕导航到B屏幕

从B导航回屏幕。 此时，不调用useffect

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的更新状态在再次返回屏幕时保持不变（不是从道具加载）

我没有改变屏幕B中的道具。用户。 但是我认为

const[roleID，setRoleID]=useState（props.user.SELECTED\u ROLE.id）

至少应该调用这一行

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

// 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()
    );
}

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

---

谢谢

当您从A导航到B时，组件A不会被销毁（它会留在导航堆栈中）。因此，当您向后导航时，代码不会再次运行

也许是一种更好的方式来实现您想要使用的导航生命周期事件（我假设您使用的是

react navigation

），即订阅

didFocus

事件，并在聚焦组件时运行您想要的任何代码，例如

const unsubscribe = props.navigation.addListener('didFocus', () => {
    console.log('focussed');
});

在适当的时候不要忘记退订

// sometime later perhaps when the component is unmounted call the function returned from addListener. In this case it was called unsubscribe
unsubscribe();

---

以下解决方案对我有效：

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

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

    useEffect(() => {
        console.log("called");
        getInitialData();
    }, [props, isFocused]);

    const getInitialData = async () => {}    

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

我用过导航5+

@反应导航/本机“：“5.6.1”

---

React Navigation的当前版本提供了useFocusEffect挂钩。请参阅。

React Navigation 5提供了useFocusEffect挂钩，与useEffect类似，唯一的区别是它仅在屏幕当前聚焦时运行。请查看文档

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

当您返回到屏幕A时是否更改了props.user？不会再次调用

useffect

，因为

props.user

在您的情况下保持不变…您可以在一个组件中使用多个

useffects

：）您如何在屏幕之间导航？您可以添加一些代码吗？您使用的是什么导航包？navig在堆栈中执行更多操作，而不是卸载“返回”页面"?

useffect

钩子只会在第一次渲染时以及在其依赖项数组中的值更新时触发，因此我怀疑它不会因为没有重新装载而再次触发。我可以知道如何取消IBE吗？要取消订阅，只需调用从

addListener

返回的函数。在上面的例子中，我称之为

unsubscribe

。我也更新了上面的答案。如果您使用的是react navigation 5.x，请尝试一下我使用的

useffect（（）=>{If（isFocused）{console.log（“调用”）；getInitialData（）；}，[isFocused]）似乎效果更好谢谢你，先生！！完美、非常聪明的解决方案