reactjs - React Navigation "focus"事件监听器不使用更新值

Question

我遇到了 React 导航事件监听器的问题!

逻辑:我想在每次用户访问我的 native react 应用程序的购物车屏幕时获取购物车详细信息。为了决定是否获取购物车的详细信息，我检查商店中的购物车 ID。如果 cart id 为 null，则意味着尚未创建购物车，因此只需关闭加载器并且不获取购物车详细信息。另一方面，如果商店中有购物车 ID，请获取购物车详细信息。

场景 1: 第一次，如果我在商店中没有购物车 ID 时来到购物车屏幕，它不会加载购物车详细信息:一切都很好!但是在随后访问购物车屏幕后，即使商店中有购物车 ID，它也不会获取购物车详细信息。

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

可能的问题:所以问题似乎是事件监听器将使用首次运行时提供的购物车值，而不考虑更新后的值!请给我指出正确的方向!

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;
}, []);

Solution

所以最终我发现，如果您使用的值可能会发生变化，那么您必须将其添加到先前为空的数组(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]);

Answer 1

对于 React 导航 4.x，请尝试使用“willFocus”而不是“focus”

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