鍍金池/ 問答/HTML5  網絡安全  HTML/ react + mobx中store的值不能初始化,只能通過刷新界面來重置嗎?

react + mobx中store的值不能初始化,只能通過刷新界面來重置嗎?

我寫了一個通用的input組件,有獲取驗證碼還有倒計時的功能。倒計時的時間是存在組件的store里面的?,F(xiàn)在的情況是,當我在A頁面倒計時了,hashHistory.push()跳轉到B頁面,其中B頁面也有到計時組件,此時B頁面就顯示的是正在倒計時。最佳的效果是,跳轉到B頁面時,沒有開始倒計時。但是刷新頁面之后就沒問題了。

想知道以什么方法來達到這個效果。目前我想到的是,在組件componentDidMount的時候重置store,就是寫一個action,在action里面把所以observable的數(shù)據(jù)都手動重置一下。
想問問大神們,還有其他的方法嗎?

下面是我的代碼:

組件代碼:

    class InputStore {

        @observable sendSuccess = false;
        @observable leftTime = 60;
          ......
        
    }
    
    //倒計時
    @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頁面代碼:

   hashHistory.push("/Login");

A、B頁面都只是引用這個公用組件

其實不只是公用組件會有這樣的問題,同一個頁面進入兩次也會有這樣的問題。比如在A頁面上傳一張圖片,將url保存在了store里面,當?shù)诙芜M入A頁面的時候,上次上傳的圖片還存在。

我在想有沒有什么一勞永逸的方法,不用在每個頁面里面去重置store。

17-12-16
經過幾天的思考實踐,總結出,如果只是少部分的數(shù)據(jù)需要重置的話,就在componentWillUnmount中調action手動重置(componentDidMount中重置會影響性能)。如果是大量數(shù)據(jù)需要重置,還是在store中分頁面存儲數(shù)據(jù)比較好。

回答
編輯回答
乞許
  1. 如樓上所說,建議在第一個組件的componentWillUnmount中重置store。
  2. 這個問題的根本原因是,兩個組件實例(input組件),共享了store中的一個變量,所以可以使用不同的變量來標識不同頁面的input組件實例的狀態(tài)。當然這種方式會顯得冗余些,但store中保存的狀態(tài),有一類就是屬于UI狀態(tài),而UI狀態(tài)的描述確實會比較冗余,但結構還是比較簡單的。
2017年10月2日 10:24
編輯回答
殘淚

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

2018年3月21日 13:26
編輯回答
悶騷型

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

2017年9月27日 22:35
編輯回答
青瓷

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

import {observable, action} from 'mobx';

class HomeStore {
  @observable num;

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

  @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