Reactjs “反应导航”；焦点“；事件侦听器不使用更新的值

我遇到了react导航事件侦听器的问题

逻辑：每次用户来到我的react本机应用程序的购物车屏幕时，我都想获取购物车的详细信息。为了决定是否获取购物车详细信息，我在商店中检查购物车id。如果购物车id为null，则表示尚未创建购物车，因此只需关闭加载程序，不获取购物车详细信息。另一方面，如果商店中有购物车id，则获取购物车详细信息

场景1:第一次，如果我在商店中没有购物车id时进入购物车屏幕，它将不会加载购物车详细信息：一切都很好！但在随后访问购物车屏幕后，即使商店中有购物车id，它也不会获取购物车详细信息

场景2:第一次，如果我在商店中存在购物车id时访问购物车屏幕，它将在这次以及后续访问中获取购物车详细信息

<强>可能的问题：，因此问题似乎是事件侦听器将使用在第一次运行时提供的CART值，不会考虑更新的值！请给我指出正确的方向

useEffect(()=>{
    let cartId = context.store.cartReducer.cart.id;
    const unsubscribe = props.navigation.addListener('focus', () => {
        if(cartId) {
            setIsDetailsLoading(true);
            fetchCartDetails(context.dispatch, {cartId: cartId});
        } else {
            setIsDetailsLoading(false);
        }
    });
    return unsubscribe;
}, []);

解决方案

因此，最终我发现，如果使用的值可能会更改，那么必须将其添加到之前为空的数组（useEffect hook的第二个参数）中

所以代码看起来像

useEffect(()=>{
    let cartId = context.store.cartReducer.cart.id;
    const unsubscribe = props.navigation.addListener('focus', () => {
        if(cartId) {
            setIsDetailsLoading(true);
            fetchCartDetails(context.dispatch, {cartId: cartId});
        } else {
            setIsDetailsLoading(false);
        }
    });
    return unsubscribe;
}, [context.store.cartReducer.cart.id]);

---

对于react navigation 4.x，请尝试“willFocus”而不是“focus”

useffect（（）=>{
让cartId=context.store.cartdirector.cart.id；
const unsubscribe=props.navigation.addListener（'willFocus'，（）=>{
if（cartId）{
setIsDetailsLoading（真）；
fetchCartDetails（context.dispatch，{cartId:cartId}）；
}否则{
setIsDetailsLoading（假）；
}
});
退订；
}, []);

在React Navigation v5.x中，您应该使用“导航生命周期”

文档中的示例：

从'@react navigation/native'导入{useFocusEffect}；
函数配置文件（）{
聚焦效应(
React.useCallback（（）=>{
//当屏幕聚焦时做些什么
return（）=>{
//在屏幕未聚焦时执行某些操作
//对于清除函数很有用
};
}, [])
);
返回；
}

感谢您的回复，请注意我使用的是react navigation 5，请查看此链接