react应用中mobx未检测到数组的更新

---

title: react应用中mobx未检测到数组的更新
cover: /img/5.jpg

在mobx中定义一个可观察的数组

class Store{
    @observable testArray = [];
}

在组件里面引用这个store

testArray.map(item=>(
    <span>{item}</span>
))

这个打印这个testArray数组会发现这个时候的数组类型已经不是我们常规的array类型了，已经被mobx转换成了observableArray类型的数组，这种的如果你的store里面只有这一个数组没有其他变量的时候，更新整个数组，除非你是将这个数组置为空，不然组件是不会观察到他的改变，就不会重新render了
解决办法是：
在组件中使用这个数组的时候，slice()一下转变成我们正常的js类型的array就可以了

testArray.slice().map(item=>(
    <span>{item}</span>
))

具体slice的地方可以是在store里面也可以在组件里面，组件里面就像上面写的那样,store里面就是先得到testArray然后slice一下，在把新的数组赋值给他。
如果遇到使用数组的时候出现一些看不懂的报错，排除数组越界的一些错误，多半是因为observableArray类型的问题，这个时候不妨slice()一下试试。