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()一下试试。