React组件结合MobX Store实现时重复加载问题排查与解决

问题原因 #

React StrictMode在开发环境下会双重执行组件的副作用逻辑（比如useEffect的回调函数），导致loadActivities被调用两次。而你的loadActivities方法是通过push向数组追加数据，没有先清空已有内容，最终造成活动数据重复。重复的id会让findIndex在删除/编辑时只匹配第一个重复项，引发操作异常。

解决方案 #

1. 修改loadActivities方法：替换数组而非追加数据 #

在加载活动前直接替换整个activities数组，而非逐个push，确保每次调用都会覆盖旧数据，避免重复。同时简化日期处理逻辑：

// activityStore.ts
loadActivities = async () => {
    this.loadingInitial = true;

    try {
        const activitiesResponse = await axios.get('http://localhost:5000/activities');
        // 统一处理日期并生成新数组
        const activities: Activity[] = activitiesResponse.data.map(activity => ({
            ...activity,
            date: activity.date.split('T')[0]
        }));

        runInAction(() => {
            this.activities = activities; // 直接替换数组，而非push
            this.loadingInitial = false;
        });
    } catch (error) {
        console.log(error);
        runInAction(() => {
            this.loadingInitial = false;
        });
    }
}

2. 优化useEffect依赖（可选） #

ActivityDashboard中的useEffect依赖activityStore是多余的，因为store是单例，引用不会变化。将依赖改为空数组，明确只在组件挂载时加载一次数据：

// ActivityDashboard.tsx
useEffect(() => {
    activityStore.loadActivities();
}, []); // 空数组表示仅挂载时执行

为什么之前重置长度无效？ #

你尝试的activities.length = 0虽然能清空数组，但MobX对数组的响应式追踪更推荐直接赋值新数组，而非修改length属性。另外如果重置操作的时机不对（比如在接口请求之后），仍会导致两次调用时重复追加数据。

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