当数组开始为空时，可观察数组mobx不会更新

Question

我的商店里有一个空的observable数组（将包含带有键'id'和'val'的对象）（比如myStore）

@observable 
var myArray = [];

然后我在myStore中有一个功能

@action
addItem(item){ //item = { id : 'id1' , val : 123}
   myArray.push(item);
}

@computed
get getmyArray{
   return myArray;
}

现在的问题是，当我将项目推送到myArray时，我的Observe myArray组件不会重新渲染。所以，我想从myArray渲染每个元素。像这样

renderList = () => {
    const store = this.props.myStore;

    var list = [];

    for(var index in store.getmyArray){
        list.push(
                <li key = {store.getmyArray[index].id}>
                    {store.getmyArray[index].id + " ===> " + store.getmyArray[index].val} 
                </li> 
        );  
    }

    return (
        <ul className = "curr-list">
            {list}
        </ul>
    );

}

事实是，如果我在声明myArray时有一些初始元素，那些代码运行得很好，但是如果我从myArray中删除所有元素，然后再将某个项目再次推送到它，它将不会再次重新渲染。

所以，

1. 当myArray为空时，我的组件不会重新渲染，然后将项目推送到它。 （当我在console.log（myArray）时，项目在myArray中，我的组件只是不重新渲染）
2. 当myArray有一些初始元素时我的组件没有重新渲染，然后我删除所有元素，然后我再次推送到myArray（当我删除并添加元素到myArray时，只要它不是空的，我的组件重新渲染只是精细）。

有什么线索的原因？

Answer 1

处理可观察数组或对象时，确保太深复制数组（或对象）