dva踩坑 - 多个dispatch最终只触发一个

近日，遇到两个问题，这里简单描述一下：

第一个问题：在同一个页面，分别有两个不同的组件，调用了同一个接口，进入network面板发现两个接口都请求了并正常返回数据。另外介绍一下该数据的用途，第一个组件中用于构建一颗树直接展示在页面，另一个功能是第二个组件中用于构成下拉框的数据筛选来源。
呈现在页面上的bug：第一个组件的树状图形没有呈现出来，但是下拉框的筛选项能正常出现。。。

再来说第二个问题：在一个页面，有一个数组map返回的函数式组件，由于业务需要，在每个组件内部也都调用了同一个接口，用于请求该相同组件对应的数据。
呈现的bug：只有数组里最后一个组件进行了dispatch.then()这部分的操作，进行debugger也只有最后一个组件会进入.then里面执行对应操作

开始奇妙的解决问题思路：

1. 既然无法进入dispatch.then里面执行，那我就不把代码写在then内，加个async…await
   下面展示一些 内联代码片。

原先代码长这样：

	// 没去掉.then之前
	/* 查询标签详情 */
    const queryLabelDetail = useCallback(
        async (selectedLabelName, selectedLabelId) => {
   
            if (!selectedLabelId || !selectedLabelName) return;
            setSelectedLabelId(selectedLabelId);
            await dispatch({
   
                type: 'group/queryLabelDetail',
                payload: {
   
                    labelName: selectedLabelName,
                    labelId: selectedLabelId,
                },
            }).then((res) => {
   
            	// 只有最后一个组件会进入到这里
            	debugger
				if (!res || res.data.statusCode !== 200) return;
	            const data = res?.data?.data;
	            setOptTypes(data?.opts || []);
	            setRangeOptions(
	                data?.values?.map(item => ({
   
	                    ...item,
	                    label: item.name,
	                })) || [],
	            );
	            setGame