react + mobx中store的值不能初始化，只能通過(guò)刷新界面來(lái)重置嗎？

我寫(xiě)了一個(gè)通用的input組件，有獲取驗(yàn)證碼還有倒計(jì)時(shí)的功能。倒計(jì)時(shí)的時(shí)間是存在組件的store里面的?，F(xiàn)在的情況是，當(dāng)我在A頁(yè)面倒計(jì)時(shí)了，hashHistory.push()跳轉(zhuǎn)到B頁(yè)面，其中B頁(yè)面也有到計(jì)時(shí)組件，此時(shí)B頁(yè)面就顯示的是正在倒計(jì)時(shí)。最佳的效果是，跳轉(zhuǎn)到B頁(yè)面時(shí)，沒(méi)有開(kāi)始倒計(jì)時(shí)。但是刷新頁(yè)面之后就沒(méi)問(wèn)題了。

想知道以什么方法來(lái)達(dá)到這個(gè)效果。目前我想到的是，在組件componentDidMount的時(shí)候重置store，就是寫(xiě)一個(gè)action，在action里面把所以observable的數(shù)據(jù)都手動(dòng)重置一下。
想問(wèn)問(wèn)大神們，還有其他的方法嗎？

下面是我的代碼：

組件代碼：

    class InputStore {

        @observable sendSuccess = false;
        @observable leftTime = 60;
          ......
        
    }
    
    //倒計(jì)時(shí)
    @action countDown = () => {
        let count = setInterval(()=>{

            if(this.leftTime === 1){

                clearInterval(count);

                runInAction(()=>{
                    this.leftTime = 60;
                    this.sendSuccess = false;
                });

            }

            runInAction(()=>{
                this.leftTime = this.leftTime - 1
            });

        },1000);
    }

A頁(yè)面代碼：

   hashHistory.push("/Login");

A、B頁(yè)面都只是引用這個(gè)公用組件

其實(shí)不只是公用組件會(huì)有這樣的問(wèn)題，同一個(gè)頁(yè)面進(jìn)入兩次也會(huì)有這樣的問(wèn)題。比如在A頁(yè)面上傳一張圖片，將url保存在了store里面，當(dāng)?shù)诙芜M(jìn)入A頁(yè)面的時(shí)候，上次上傳的圖片還存在。

我在想有沒(méi)有什么一勞永逸的方法，不用在每個(gè)頁(yè)面里面去重置store。

17-12-16
經(jīng)過(guò)幾天的思考實(shí)踐，總結(jié)出，如果只是少部分的數(shù)據(jù)需要重置的話，就在componentWillUnmount中調(diào)action手動(dòng)重置(componentDidMount中重置會(huì)影響性能)。如果是大量數(shù)據(jù)需要重置，還是在store中分頁(yè)面存儲(chǔ)數(shù)據(jù)比較好。

回答

編輯回答

乞許

如樓上所說(shuō)，建議在第一個(gè)組件的componentWillUnmount中重置store。
這個(gè)問(wèn)題的根本原因是，兩個(gè)組件實(shí)例（input組件），共享了store中的一個(gè)變量，所以可以使用不同的變量來(lái)標(biāo)識(shí)不同頁(yè)面的input組件實(shí)例的狀態(tài)。當(dāng)然這種方式會(huì)顯得冗余些，但store中保存的狀態(tài)，有一類就是屬于UI狀態(tài)，而UI狀態(tài)的描述確實(shí)會(huì)比較冗余，但結(jié)構(gòu)還是比較簡(jiǎn)單的。

2017年10月2日 10:24

編輯回答

殘淚

componentDidMount里重置估計(jì)會(huì)有出現(xiàn)問(wèn)題,會(huì)閃一下；你公用的一個(gè)store從A到B的時(shí)候store里面已經(jīng)有值了在第一次渲染的時(shí)候還是會(huì)渲染上去;可以試試在componentWillUnmount或者componentWillMount里面

2018年3月21日 13:26

編輯回答

悶騷型

export的應(yīng)該是class，而不是實(shí)例化后的store，在constructor里this.store = new InputStore()，這樣每次載入組件都會(huì)初始化mobx。

2017年9月27日 22:35

編輯回答

青瓷

為什么不能初始化呢？
store.js:

import {observable, action} from 'mobx';

class HomeStore {
  @observable num;

  constructor() {
    this.num = 0 //這個(gè)就是初始化是可以得到
  }

  @action plus = () => {
    this.num = ++this.num
  }
  @action minus = () => {
    this.num = --this.num
  }
}
const homeStore = new HomeStore()
export {homeStore}

具體也可以看看我的demo：https://github.com/Hancoson/r...

2017年5月14日 09:38