資訊專欄INFORMATION COLUMN
摘要：背景是的項(xiàng)目，并且打開了嚴(yán)格模式的情況下大概我的需求是，將中的一個(gè)數(shù)組在中進(jìn)行渲染，那么自然就想到了的方法，然后再中直接將數(shù)組轉(zhuǎn)成代碼塊。同樣的，的解構(gòu)賦值，也只是淺拷貝所以說，嚴(yán)格模式下一直再警告我不能修改的值。
背景是 React + mobx@4.x + antd 的項(xiàng)目，并且打開了嚴(yán)格模式的情況下：
configure({ enforceActions: true })
大概我的需求是， 將store 中的一個(gè)數(shù)組（dataSource）在stateless Component中進(jìn)行渲染，那么自然就想到了Array 的 map 方法，然后再JSX中直接將數(shù)組轉(zhuǎn)成JSX 代碼塊。
const wrapperItem = (title, list) => {
const result = list.map((item, index) =>
)
return (
{title}
{result}
)
}
上面的demo 代碼中的第二個(gè)參數(shù)list 會(huì)傳入observable 屬性----是一個(gè)數(shù)組。
然后瀏覽器狂報(bào)錯(cuò)誤:
[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
然后看一下 下面的簡單代碼排查錯(cuò)誤吧：
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的單個(gè)key值，再將key值返回，自然就修改了兩個(gè)
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 也都改變了，關(guān)鍵很不理解，明明 list 跟 list.slice(0) 已經(jīng)不是指向同一個(gè)數(shù)組，為什么list.slice(0) 修改內(nèi)容還會(huì)引發(fā)list 也改變？
// wa ...
// 難受的一批。。。
// slice() concat() 都是淺拷貝，整個(gè)數(shù)組的指向是不同的了，但是，里面的對(duì)象的指向是同一個(gè)，所以其實(shí)在map里執(zhí)行的函數(shù)，操作的對(duì)象還是同一個(gè)。。。
list.slice(0)[0] === list[0] // truw
list.slice(0) === list // false
同樣的，es6 的解構(gòu)賦值，也只是淺拷貝：
var a = {b: {c:111},d:{d:2222}}
var {b} = a
b === a.b
// true
所以說，mobx嚴(yán)格模式下一直再警告我不能修改observable 的值。
constructor() {
this.initData()
}
@action initData = async () => {
this.baseInfo = await getBaseInfo()
this.extractInfo = await getExtractInfo()
this.extractInfo = await getExtractStatus()
}
我之前的代碼是這樣的，其實(shí)，我覺得連@action 也不要，因?yàn)榫退阍趪?yán)格模式下constructor函數(shù)中也是可以修改observable中的值的。
那為什么一直報(bào)不能在action之外修改observable 屬性的錯(cuò)誤呢？
action 僅影響當(dāng)前運(yùn)行的函數(shù),而不會(huì)影響異步函數(shù)，這意味著如果你有setTimeout,promise, then 或 異步的constructor ,在回調(diào)更多的狀態(tài)改變,這些回調(diào)應(yīng)包裝在 runInAction 中。。。。
寫在最后：
我之前真的沒有好好注意這個(gè)問題，對(duì)于以前沒有任何限制引用值的 set 的時(shí)候，我往往只關(guān)心我得到的值（return 出來的）是不是我想要的。。。。
說明我對(duì)于什么 slice,concat() 產(chǎn)生一個(gè)新的數(shù)組這一個(gè)概念的理解，只停留于表面。。。。
我這么菜，不能老是這樣。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/94319.html
摘要：所以這是一篇插隊(duì)的文章，用于去理解中的裝飾器和概念。因此，該的作用就是根據(jù)入?yún)⒎祷鼐唧w的描述符。其次局部來看，裝飾器具體應(yīng)用表達(dá)式是，其函數(shù)簽名和是一模一樣。等裝飾器語法，是和直接使用是等效等價(jià)的。 ================前言=================== 初衷：以系列故事的方式展現(xiàn) MobX 源碼邏輯，盡可能以易懂的方式講解源碼； 本系列文章： 《【用故事解...
摘要：本文挑選了到大廠面試題，大家在閱讀時(shí)，建議不要先看我的答案，而是自己先思考一番。構(gòu)造函數(shù)返回值是或，是返回的是種返回的對(duì)象。 今年來，各大公司都縮減了HC，甚至是采取了裁員措施，在這樣的大環(huán)境之下，想要獲得一份更好的工作，必然需要付出更多的努力。 本文挑選了20到大廠面試題，大家在閱讀時(shí)，建議不要先看我的答案，而是自己先思考一番。盡管，本文所有的答案，都是我在翻閱各種資料，思考并驗(yàn)證之...
摘要：原理分析的核心就是通過觀察某一個(gè)變量，當(dāng)該變量產(chǎn)生變化時(shí)，對(duì)應(yīng)的內(nèi)的回調(diào)函數(shù)就會(huì)發(fā)生變化。回調(diào)函數(shù)若依賴外部環(huán)境，則無法進(jìn)行收集很好理解，的回調(diào)函數(shù)在預(yù)執(zhí)行的時(shí)候無法到達(dá)那一行代碼，所以收集不到。 Mobx解決的問題 傳統(tǒng)React使用的數(shù)據(jù)管理庫為Redux。Redux要解決的問題是統(tǒng)一數(shù)據(jù)流，數(shù)據(jù)流完全可控并可追蹤。要實(shí)現(xiàn)該目標(biāo)，便需要進(jìn)行相關(guān)的約束。Redux由此引出了dispa...
摘要：數(shù)組學(xué)習(xí)記錄是的實(shí)例屬性。對(duì)數(shù)組元素進(jìn)行排序，并返回當(dāng)前數(shù)組。返回一個(gè)由所有數(shù)組元素組合而成的字符串。為數(shù)組中的每個(gè)元素執(zhí)行一次回調(diào)函數(shù)。返回一個(gè)數(shù)組迭代器對(duì)象，該迭代器會(huì)包含所有數(shù)組元素的鍵值對(duì)。 JavaScript數(shù)組學(xué)習(xí)記錄 Array.length Array.length 是Array的實(shí)例屬性。返回或設(shè)置一個(gè)數(shù)組中的元素個(gè)數(shù)。該值是一個(gè)無符號(hào) 32-bit 整數(shù)，并且總是...
閱讀 3225·2021-11-08 13:21
閱讀 1202·2021-08-12 13:28
閱讀 1413·2019-08-30 14:23
閱讀 1935·2019-08-30 11:09
閱讀 850·2019-08-29 13:22
閱讀 2694·2019-08-29 13:12
閱讀 2557·2019-08-26 17:04
閱讀 2265·2019-08-26 13:22
