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

【问题标题】：Observable array mobx doesn't update when the array starting empty当数组开始为空时，可观察数组 mobx 不会更新
【发布时间】：2019-03-09 18:11:05
【问题描述】：

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

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

所以，

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

有什么线索吗？

【问题讨论】：

如何删除数组中的所有元素？
我不会一次删除所有元素，我在 li 标签中有一个按钮，它将处理要删除的元素。所以，我一一删除。
好的。您能否在问题中包含该代码？理想情况下，在例如创建一个Minimal, Complete, and Verifiable example CodeSandbox 会更容易帮到你。
这是我的代码 codesandbox.io/s/2wjyjzw51p 。在 myComponent.tsx 和 myStore.ts 中。我不确定它是否会在沙盒上运行。基本上它是一个简单的应用程序，您可以在其中查看外汇汇率列表。对不起，我不能举一个完美的例子
尝试使用尽可能少的代码使其可运行以重现您的错误。你的handleDelete 和addToListCurr 看起来有点奇怪。 You could try this.

标签： javascript reactjs mobx

【解决方案1】：

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

【讨论】：