react dispatch不生效的坑

我不是女神ヾ 2024-03-27 19:26 15阅读 0赞

## 一、前言 ##

最近写react antd项目，在A页面中使用了`dispatch`方法，然后B页面中嵌套A页面，没有问题；

但是在C页面中嵌套A页面的时候，就发现`dispatch`方法没有执行，也不报错，就很奇怪；

还发现，如果先打开一次B页面，后续再打开C页面，`dispatch`方法就可以执行了；但是直接打开C页面就不行。

## 二、问题原因 ##

1.排查发现，`dispatch`执行的目标js是包含在B页面里的，目录结构如下：  
![在这里插入图片描述][c678ecd91ad946d28dd46402f447873e.png]  
这样，打开B页面->A页面，调用dispatch，是没有问题的。（此时会加载models里的js文件）

2.但是，C页面在另一个文件夹下，目录结构如下：  
![在这里插入图片描述][c61343c01f8a4fada6ca4a7e7db5f743.png]  
这样，虽然C页面引用了A页面，但是打开C页面->A页面，调用dispatch，会因为js文件没有加载，导致无法调用。**（最坑的是没有报错，也能正常打开A页面，都不知道为什么调用没有生效，还得自己找）**

## 三、解决方法 ##

1.既然明白了是js文件没有加载导致的，那就把`dispatch`目标方法写到全局js文件里，那样肯定就会加载了。本人项目的路径样例如下：  
![在这里插入图片描述][34ed8d56177c438b833459f66198ed99.png]  
这样，C页面->A页面，调用dispatch，因为这个文件夹里的js文件肯定会加载，调用就没有问题了。

## 四、备注 ##

dispatch调用代码样例：

searchList = () => {
        const { dispatch } = this.props;
    
        console.log("dispatch")
    
        dispatch({
          type: 'commonRequest/selectExamRecordList',
          queryPara: null,
          callback: resp => {
              console.log("resp", resp)
          }
        });
      };

[c678ecd91ad946d28dd46402f447873e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/7d278786324645b7bc3a2570902fa0e0.png
[c61343c01f8a4fada6ca4a7e7db5f743.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/2a267e2da728432f9f204f6709685ee4.png
[34ed8d56177c438b833459f66198ed99.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/5d5e194f2075495d992404d0209073f6.png