如何处理 react hooks 同时调用两个及以上 promise 引发的竞争条件？

Question

在一个组件内有两个 tab，tab 内各有一个列表。现在通过 useState 初始化以下数据：

  const [currentTabKey, setTabKey] = useState('1');
  const [paginationMaps, setPaginationMaps] = useState({
    1: { pageSize: 10, current: 1 },
    2: { pageSize: 10, current: 1 },
  });
  const [listMap, setListMap] = useState({
    1: [],
    2: [],
  });

再定义一个获取请求的函数，并调用它

  const handleFetchList = useCallback(async (activeKey: string, q?: string) => {
    const currentConf = paginationMaps[activeKey];
    const parmas: EmployeeListParams = {
      size: currentConf.pageSize,
      page: currentConf.current,
      status: Number(activeKey),
    };
    if (q) parmas.q = q;

    const res: EmployeeListResult = await fetchEmployeeList(parmas);

    const newListMap = { ...listMap, [activeKey]: res.employee_list };
    setListMap(newListMap);
    setPaginationMaps({
      ...paginationMaps,
      [activeKey]: {
        ...paginationMaps[activeKey],
        pageSize: paginationMaps[activeKey].pageSize + 1,
      },
    });
  }, []);

  useEffect(() => {
     handleFetchList('1');
     handleFetchList('2');
  }, []);

这种方式赋值会导致赋值竞争，如果要使用 Promise.all 的话那就需要再拆分一个业务函数出来。

或者直接赋值也能解决问题，但这样好像不符合 react 的写法

// const newListMap = { ...listMap, [activeKey]: res.employee_list };
// setListMap(newListMap);
listMap[activeKey] = res.employee_list;

现在有什么比较优雅方案可以处理这种情况吗？

Answer 1

试试 hooks 这个库：https://hooks.umijs.org/

Answer 2

这是因为抽象不合理导致的。几种不同处理方式供参考：

• 每个 tab 用独立 useState。如果 tab 数不确定这个方法不可取。
• setListMap 和 setPaginationMaps 参考 useState 的 setState 支持回调的设计。
• setListMap 和 setPaginationMaps 基础上抽象出只接受单独 activeKey 的接口，让该接口内部处理 set state 问题，即更新 state 前才获取最新 state。
• 使用 Promse.all 等异步逻辑控制处理冲突。这是下策，并没有解决 paginationMaps 与 handleFetchList 冲突的问题。