React Context导航器内调用action不更新组件状态问题排查

问题场景 #

在React Context中，在导航器MyStack里调用fetchNotifications action获取数据，期望Notifications组件能渲染更新后的状态，但实际只有在Notifications组件内部调用该action时，状态变化才会触发组件重新渲染；在导航器内调用时，即便状态已成功更新，Notifications组件也不会重新渲染（已确认组件关联了Context）。

相关代码片段 #

NotificationContext.js #

const notificationsReducer = (state, action) => {
    switch (action.type) {
        case 'fetch_notifications':
            return {
                ...state, notifications: action.payload.messages
            }
        default:
            return state;
    }
};
const fetchNotifications = dispatch => async () => {
    const notifications = await API.fetchNotifications();
    dispatch({type: 'fetch_notifications', payload: notifications})
};
export const {Provider, Context} = createDataContext(
    notificationsReducer,
    {fetchNotifications},
    {notifications: []}
)

navigation/index.js #

const MyTabs = (props) => {
    return (
        <Tab.Navigator
            screenOptions={{
                headerRight: (props) => (
                        <TouchableOpacity onPress={() => navigation.navigate("Notifications")}>
                            <Icon name="notifications"/>
                        </TouchableOpacity>
                )
            }}
        >           
        </Tab.Navigator>
    );
}

const MyStack = () => {
const {fetchNotifications, state} = useContext(NotificationsContext);

    useEffect( () => {
        fetchNotifications();
    }, []);

    return (
        <Stack.Navigator>
            <Stack.Group>
                <Stack.Screen name="Tabs">
                    {(props) => <MyTabs {...props}  />}
                </Stack.Screen>
                <Stack.Screen name="Notifications">
                    {(props) => <NotificationsScreen {...props}/>}
                </Stack.Screen>
            </Stack.Group>
 </Stack.Navigator>
}

const Navigator = () => {
import { Provider as NotificationsProvider } from "...";
return (
    <NotificationsProvider>
       <NavigationContainer> <MyStack/> </NavigationContainer>
    </NotificationsProvider>
)
} 

Notifications组件 #

const Notifications = () => {
    const {state} = useContext(NotificationsContext);
    return <View>{state.notifications.map((notification, i) => <Text>{notification.title}</Text>)}</View>
    
}

createDataContext工具函数 #

export default (reducer, actions, defaultValue) => {
    const Context = createContext();
    const Provider = ({children}) => {
        const [state, dispatch] = useReducer(reducer, defaultValue)
        const boundActions = {};
        for (let key in actions) {
            boundActions[key] = actions[key](dispatch);
        }
        return (
            <Context.Provider value={{state, ...boundActions}}>
                {children}
            </Context.Provider>
        );
    };
    return { Context, Provider};
};

问题根源 #

1. 组件内部的import语句错误：Navigator组件中将import语句写在了函数内部，违反ES模块规范，会导致Context实例异常，使得Notifications组件订阅的Context与MyStack中使用的Context不是同一个，状态更新无法同步。
2. boundActions未缓存：createDataContext中每次Provider渲染时都会生成新的action函数实例，可能引发不必要的组件重新渲染，也可能干扰Context的状态更新传递。

解决方案 #

1. 修正import位置 #

将import语句移到文件顶部，禁止在组件函数内部使用import：

// navigation/index.js 文件顶部
import { Provider as NotificationsProvider } from "..."; // 替换为正确的文件路径

const Navigator = () => {
    return (
        <NotificationsProvider>
           <NavigationContainer> <MyStack/> </NavigationContainer>
        </NotificationsProvider>
    )
} 

2. 优化createDataContext工具函数 #

使用useMemo缓存boundActions和Context的value对象，避免不必要的渲染：

export default (reducer, actions, defaultValue) => {
    const Context = createContext();
    const Provider = ({children}) => {
        const [state, dispatch] = useReducer(reducer, defaultValue);
        
        // 缓存绑定后的action函数，仅在dispatch变化时重新生成
        const boundActions = useMemo(() => {
            const actionsObj = {};
            for (let key in actions) {
                actionsObj[key] = actions[key](dispatch);
            }
            return actionsObj;
        }, [dispatch]);

        // 缓存Context的value对象，仅在state或boundActions变化时更新
        const contextValue = useMemo(() => ({
            state,
            ...boundActions
        }), [state, boundActions]);

        return (
            <Context.Provider value={contextValue}>
                {children}
            </Context.Provider>
        );
    };
    return { Context, Provider};
};

3. 验证API返回结构匹配 #

确保API.fetchNotifications()的返回结构与reducer逻辑一致：
如果API直接返回通知数组，修改reducer中的赋值逻辑：

const notificationsReducer = (state, action) => {
    switch (action.type) {
        case 'fetch_notifications':
            return {
                ...state, 
                notifications: action.payload // 直接使用payload，而非payload.messages
            }
        default:
            return state;
    }
};

4. 完善Notifications组件的容错处理 #

添加空数组判断，避免数组为空时map方法报错：

import { Context as NotificationsContext } from './NotificationContext';

const Notifications = () => {
    const {state} = useContext(NotificationsContext);
    return (
        <View>
            {state.notifications?.map((notification, i) => (
                <Text key={i}>{notification.title}</Text>
            ))}
        </View>
    )
}

内容的提问来源于stack exchange，提问作者user6377312