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

Question

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

@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 中删除所有元素，它就不会再次重新呈现，然后再次向其推送一些项目。

所以，

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

知道为什么吗？

Answer 1

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

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

Observable array mobx doesn't update when the array starting empty

javascript

reactjs

mobx