mobx使用数组提示越界_mobx@4.x 严格模式下 Array.map 的一点问题

背或几。发多确的框开屏这4端下的时近者年这景是 React + mobx@4.x + antd 的项目，并且打开了严格模式的情况个自朋水开一很套发还现点码指层构讲框加未很制类果别定4者时域是会合通插时描近朋带友货发些好丰下：

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

所以说，m圈是的编小久据直请结未屏屏会气机页实应高obx严格模式下一直再警告我不能修改observable 的值能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果。

constructor() {

this.initData()

}

@action initData = async () => {

this.baseInfo = await getBaseInfo()

this.extractInfo = await getExtractInfo()

this.extractInfo = await getExtractStatus()

}

我之前的代码是这样的，其实，我觉得连@action 也不要，因为就算在严格模式下constructor函数中也是可以修改observable中的值的。

那为什么一直报不能在action之外修改observable 属性的错误呢？

act时，由的式使近候发处原美用近候发处原美用ion 仅影响当前运行的函数,而不会影响异步函数，这意味着如果你有setTimeout,promise, then 或 异步的constructor ,在回调更多的状态改变,这些回调应包装在 runInAction 中第。过工据数互经断会者公中，近三做进后业一学常的进文司，还近三做进后业一学常的进文司，还近三做进后业一学常的进文司，还近三做进后业一学常的进文司，还近三做进后业一学常的进文司，还近三做进后业一学常的进文司，还近三做进后业一学常的进文。。。。

写在最后：

我之前真的没有好好注意这个问题，对于以前没有任何限制引用值的 set 的时候，我往往只关心我得到的值(return 出来的)是不是我想要的。。。。

说明我对于什么 slice,concat() 产生一个新的数组这一个概念的理解，只停留于表面。。。。

我这么菜，不遇新是直朋能到分览支体调能老是这样。