使用React在当前页面如何取到公共model层的state值.

背景:企业微信用TS加React+Dva开发遇到的问题.

第一个问题:model层请求发成功了为什么取不到更新后的state的值?

如下图:namepase名为user的model层里面有一个获取岗位的方法,在reducers里面,打印了Action的值.

看打印结果,会发现, 我在componentDidMount方法里面打印了this.props和this.props.repList的值.在render里面也分别打印了.可是都没有取到值.
但是model层的reducers里面,打印出来了Action的值.

可以得出结论,方法是发成功了.model层的Action也拿到值了.那为什么page层里面取不到呢.

• 看到这个打印结果,很多人会第一时间想到model层的effects是异步的,比如加个setTimeout看看能不能取到值.

第二个问题:加了setTimeout后取到了model层的值了吗?

如下图可以看到我在componentDidMount方法里面,发了请求.在setTimeout里面打印model层更新后的state的值.

• 事实情况是model层的reducers里面输出了当前的Action的值.但是在setTimeout里面的res是最后执行了可是还是undefined.

这样就很烦了对不对. 然后我就不想用公共的model层了. 我暴力了一点.直接注入了services层.用then方法去取值能不能拿到呢?

第三个问题:略过model层,在services层的方法后面接then()可以取到值吗?

这个运行结果是什么?肯定是拿到值了呀 :)

既然services层直接取值可以取到,那证明问题还是出在model层.我回过头再看我注入公共model层的地方.

我发请求的方法确实写得是 user/getRepListUser.怎么就请求成功后拿不到state的值呢.

排查了好久好久...........

最后找到问题了!!!!!!

我没有返回user的state.........

正确的写法是这样:

然后componentDidMount方法里面,再去取都能取到了...

页面输出:

总结:

• 其实这样写也会有其他的问题出现,如果这个异步请求比较耗时的话，setTimeout 也是取不到值的.所以最好还是用subscription去监听model.
• 当你遇到问题一个小时都解决不了的时候,一定要求助身边的同事或者大佬,不要一个人死钻牛角尖...
• 常常Ctrl C + Ctrl V 久了后.看到代码会懵逼的.有时间还是要多学习,明白原理和整个流程.多看看人家官方写法.代码流程规范.会避免很多BUG.