React中处理多个GraphQL订阅事件的问题求助

我完全懂这种异步事件乱序触发、把状态搞崩的痛苦——尤其是当多个订阅事件同时飞来时，表格数据莫名其妙丢失的感觉真的让人头大。先给你梳理下问题根源，再一步步解决：

首先，你的Reducer逻辑有致命问题 #

看你当前的ADD case：

case "ADD":
  return { ...state, productList: action.payload };

这里犯了一个核心错误：初始加载时你传的是整个产品数组，但订阅onCreateProduct触发时传的是单个产品对象——这会直接把productList从数组替换成单个对象，后续map渲染自然会出错，数据也会丢失！

修复Reducer：区分初始加载和单个项操作 #

把action类型拆分得更清晰，确保每种操作都正确更新数组：

const reducer = (state, action) => {
  switch (action.type) {
    // 初始加载整个产品列表
    case "INIT_PRODUCTS":
      return { ...state, productList: action.payload };
    // 新增单个产品（来自订阅）
    case "ADD_PRODUCT":
      return { 
        ...state, 
        productList: [...state.productList, action.payload] 
      };
    // 更新单个产品
    case "UPDATE_PRODUCT":
      return {
        ...state,
        productList: state.productList.map(item => 
          item.id === action.payload.id ? action.payload : item
        )
      };
    // 删除单个产品
    case "DELETE_PRODUCT":
      return {
        ...state,
        productList: state.productList.filter(item => 
          item.id !== action.payload.id
        )
      };
    default:
      return state;
  }
};

调整组件内的调用逻辑 #

对应修改初始加载和订阅的dispatch：

const [state, dispatch] = useReducer(reducer, { productList: [] });

useEffect(() => {
  // 初始加载用INIT_PRODUCTS
  fetchData()
    .then((result) => {
      dispatch({ type: "INIT_PRODUCTS", payload: result });
    })
    .catch((err) => console.log(err));

  // 订阅函数里用对应的action类型
  const setupSubscriptions = () => {
    const onCreateSub = API.graphql(graphqlOperation(onCreateProduct)).subscribe({
      next: (e) => {
        const product = e.value.data.onCreateProduct;
        dispatch({ type: "ADD_PRODUCT", payload: product });
      },
    });
    const onUpdateSub = API.graphql(graphqlOperation(onUpdateProduct)).subscribe({
      next: (e) => {
        const product = e.value.data.onUpdateProduct;
        dispatch({ type: "UPDATE_PRODUCT", payload: product });
      },
    });
    const onDeleteSub = API.graphql(graphqlOperation(onDeleteProduct)).subscribe({
      next: (e) => {
        const product = e.value.data.onDeleteProduct;
        dispatch({ type: "DELETE_PRODUCT", payload: product });
      },
    });

    // 收集所有订阅，方便后续清理
    return [onCreateSub, onUpdateSub, onDeleteSub];
  };

  const subscriptions = setupSubscriptions();

  // 组件卸载时清理所有订阅，避免内存泄漏和无效dispatch
  return () => {
    subscriptions.forEach(sub => sub.unsubscribe());
  };
}, []);

若仍有并发问题：添加事件队列（可选） #

如果修复后还是存在异步事件乱序导致的状态问题（比如极端高频的事件触发），可以用队列来确保事件按顺序处理：

import { useState, useRef, useEffect } from 'react';

// 在组件内添加以下代码
const [processQueue, setProcessQueue] = useState(false);
const eventQueue = useRef([]);

// 订阅时把事件加入队列，而不是直接dispatch
const onCreateSub = API.graphql(graphqlOperation(onCreateProduct)).subscribe({
  next: (e) => {
    const product = e.value.data.onCreateProduct;
    eventQueue.current.push({ type: "ADD_PRODUCT", payload: product });
    setProcessQueue(true); // 触发队列处理
  },
});

// 处理队列的副作用
useEffect(() => {
  if (!processQueue) return;

  // 按顺序处理队列里的所有事件
  while (eventQueue.current.length > 0) {
    const action = eventQueue.current.shift();
    dispatch(action);
  }

  setProcessQueue(false);
}, [processQueue, dispatch]);

总结 #

你之前的问题大概率是Reducer的ADD逻辑错误，把单个产品直接替换了整个数组，导致数据丢失。先修复这个核心问题，再确保订阅清理彻底——这两步基本能解决90%的问题。如果还有极端并发场景，再考虑添加事件队列。

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