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

我的商店中有一个空的可观察数组（它将包含键为“ id”和“ val”的对象）（比如说myStore）

@observable 
var myArray = [];

然后我在myStore中有一个函数

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

@computed
get getmyArray{
   return myArray;
}

现在的问题是，当我将项目推送到myArray时，观察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添加元素时，只要它不为空，我的组件就会重新渲染精细）。

有什么线索吗？