mobx@4.x 嚴格模式下 Array.map 的一點問題

xiaoxiaozi 發布于2019-08-22 16:24 / 973人閱讀

摘要：背景是的項目，并且打開了嚴格模式的情況下大概我的需求是，將中的一個數組在中進行渲染，那么自然就想到了的方法，然后再中直接將數組轉成代碼塊。同樣的，的解構賦值，也只是淺拷貝所以說，嚴格模式下一直再警告我不能修改的值。

背景是 React + mobx@4.x + antd 的項目，并且打開了嚴格模式的情況下：

configure({ enforceActions: true })

大概我的需求是，將store 中的一個數組（dataSource）在stateless Component中進行渲染，那么自然就想到了Array 的 map 方法，然后再JSX中直接將數組轉成JSX 代碼塊。

const wrapperItem = (title, list) => {
  const result = list.map((item, index) => 
    
      {index}
    
    
      {item}
    
  )
  return (
    
      {title}
      {result}
    
  )
}

上面的demo 代碼中的第二個參數list 會傳入observable 屬性----是一個數組。

然后瀏覽器狂報錯誤:

[mobx] Since strict-mode is enabled, changing observed observable values outside actions is not allowed. Please wrap the code in an `action` if this change is intended. Tried to modify: SupernatantStore@13.data.baseInfo

然后看一下下面的簡單代碼排查錯誤吧：

var list = [{"a": 1},{"a": 2}];
var newList = list.map(function(index){
    return index.a += 1;
});
console.log(newList,"newList",list,"list");
// newList 和 list 都改變了。先修改了list的單個key值，再將key值返回，自然就修改了兩個

var list = [{"a": 1},{"a": 2}];
var newList = list.slice(0).map(function(index){
    return index.a += 1;
});
console.log(newList,"newList",list,"list");
// newList 和 list 也都改變了，關鍵很不理解，明明 list 跟 list.slice(0) 已經不是指向同一個數組，為什么list.slice(0) 修改內容還會引發list 也改變？


// wa ... 
// 難受的一批。。。
// slice() concat() 都是淺拷貝，整個數組的指向是不同的了，但是，里面的對象的指向是同一個，所以其實在map里執行的函數，操作的對象還是同一個。。。
list.slice(0)[0] === list[0] // truw
list.slice(0) === list // false

同樣的，es6 的解構賦值，也只是淺拷貝：

    var a = {b: {c:111},d:{d:2222}}
    var {b} = a
    b === a.b
    // true

所以說，mobx嚴格模式下一直再警告我不能修改observable 的值。

  constructor() {
    this.initData()
  }
  @action initData = async () => {

     this.baseInfo = await getBaseInfo()
     this.extractInfo = await getExtractInfo()
     this.extractInfo = await getExtractStatus()

  }

我之前的代碼是這樣的，其實，我覺得連@action 也不要，因為就算在嚴格模式下constructor函數中也是可以修改observable中的值的。

那為什么一直報不能在action之外修改observable 屬性的錯誤呢？

action 僅影響當前運行的函數,而不會影響異步函數，這意味著如果你有setTimeout,promise, then 或異步的constructor ,在回調更多的狀態改變,這些回調應包裝在 runInAction 中。。。。

寫在最后：

我之前真的沒有好好注意這個問題，對于以前沒有任何限制引用值的 set 的時候，我往往只關心我得到的值（return 出來的）是不是我想要的。。。。

說明我對于什么 slice,concat() 產生一個新的數組這一個概念的理解，只停留于表面。。。。

我這么菜，不能老是這樣。

云服務器 GPU云服務器嚴格模式 javascript嚴格模式 html 5嚴格模式 html模式下

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94319.html

【用故事解讀 MobX 源碼（四）】裝飾器和 Enhancer

摘要：所以這是一篇插隊的文章，用于去理解中的裝飾器和概念。因此，該的作用就是根據入參返回具體的描述符。其次局部來看，裝飾器具體應用表達式是，其函數簽名和是一模一樣。等裝飾器語法，是和直接使用是等效等價的。 ================前言=================== 初衷：以系列故事的方式展現 MobX 源碼邏輯，盡可能以易懂的方式講解源碼；本系列文章：《【用故事解...

maybe_009 2019-08-22 18:30 評論0 收藏0
這兒有20道大廠面試題等你查收

摘要：本文挑選了到大廠面試題，大家在閱讀時，建議不要先看我的答案，而是自己先思考一番。構造函數返回值是或，是返回的是種返回的對象。今年來，各大公司都縮減了HC，甚至是采取了裁員措施，在這樣的大環境之下，想要獲得一份更好的工作，必然需要付出更多的努力。本文挑選了20到大廠面試題，大家在閱讀時，建議不要先看我的答案，而是自己先思考一番。盡管，本文所有的答案，都是我在翻閱各種資料，思考并驗證之...

tianyu 2019-08-23 18:18 評論0 收藏0
mobx學習總結

摘要：原理分析的核心就是通過觀察某一個變量，當該變量產生變化時，對應的內的回調函數就會發生變化。回調函數若依賴外部環境，則無法進行收集很好理解，的回調函數在預執行的時候無法到達那一行代碼，所以收集不到。 Mobx解決的問題傳統React使用的數據管理庫為Redux。Redux要解決的問題是統一數據流，數據流完全可控并可追蹤。要實現該目標，便需要進行相關的約束。Redux由此引出了dispa...

roundstones 2019-08-22 15:30 評論0 收藏0
JavaScript數組學習記錄_11

摘要：數組學習記錄是的實例屬性。對數組元素進行排序，并返回當前數組。返回一個由所有數組元素組合而成的字符串。為數組中的每個元素執行一次回調函數。返回一個數組迭代器對象，該迭代器會包含所有數組元素的鍵值對。 JavaScript數組學習記錄 Array.length Array.length 是Array的實例屬性。返回或設置一個數組中的元素個數。該值是一個無符號 32-bit 整數，并且總是...

TalkingData 2019-08-23 14:10 評論0 收藏0