Question

我的商店中有一个可观察的空数组（其中包含键为'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中删除所有元素，然后将某些项目再次推入它，它们将不会再次重新呈现

所以

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

任何线索为什么？

Answer 1

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

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

1 个答案: