ReactNative搭配redux,如何解决重复进入相同页面,先读到上一次请求存在store的数据?



  • 有一个列表,点击列表中的项会进入这一项的详情,我在详情页面的 didMount 中去请求详情数据,然后走 redux 存储在 store 中。在 receiveProps 中取 store 中的数据。问题出在进入不同的详情调用的是同一个详情组件,它会去取相同 store 中的数据,在一次请求未完成的时候会取到上次进入详情页的数据,就会短暂的显示错误的数据。

    我现在的解决方法:

    1 在退出页面时调用一个 redux 的 action 去清除该页面用到的存在 store 中的数据。但是在退出详情页后快速进入详情页时会出问题,因为 action 是异步进行的,会导致未能在再次进入之前及时清除数据。

    2 在列表页面加一个 count 变量,将它传给详情页面,并在取数据的时候将组件中的 count 加一并存入 store ,然后判断当前 store 中的数据对应的 count 和发送请求时的是否相同。暂时没有发现问题,只是觉得这样有点蠢。



  • 往store里存的时候用map存,
    例:infoMap = {
    uid1:aaa,uid2:bbb
    };
    每次把uid传到页面里,再receiveProps中根据uid去取不同的信息



  • @Mrzhangxiaoduo 谢谢,之前用过类似的办法,因为我们返回的数据中是有相关id的,但是由于我们可能出现这种情况,比如进入一个详情在详情页里做了一个提交或者什么保存的操作,导致这个详情的数据在服务器发生了变化,我退出这个详情,再次点进来,这个时候,服务器上详情的状态或者内容是会发生改变的,但是其对应的id并没有发生改变。所以就会再次取到store中相同id对应的旧的状态和数据。
    BTW , 昨天又想了一个新的办法,在一个新的页面构建的时候将一个 initLoading 的状态置 true,等请求发出去之后置 false,同时我们每发一个请求都会在 reducer 处同步修改一个对应的 **requestLoading 值,在发送的时候置 true,在返回的时候置 false ,根据 initLoading || requestLoading 的值判断是否取 receive 的数据。


Log in to reply