mobx@4.x 严格模式下 Array.map 的一点问题

xiaoxiaozi 发布于2019-08-22 16:24 / 845人阅读

摘要：背景是的项目，并且打开了严格模式的情况下大概我的需求是，将中的一个数组在中进行渲染，那么自然就想到了的方法，然后再中直接将数组转成代码块。同样的，的解构赋值，也只是浅拷贝所以说，严格模式下一直再警告我不能修改的值。

背景是 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模式下

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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