将数组与可观察的 MobX 可观察数组进行比较

comparing array with an observable MobX observable array

我的 stores/index.js 中有一个可观察数组,如下所示:

class Store {

    @observable order = [];

    fetchData = flow(function*() {
       try {
          const myData = yield backendService.retrieveData();

          if (myData.length > 0) {
             this.order = myData.map(element => {
                return element.id;
             });
          }
       } catch (error) { // error handling }
    });

    ...

}

我在一个组件中使用这个可观察数组来与另一个数组进行比较,如果它们不相同,我将通过一个动作更新可观察数组。

export default
@inject('store')
@observer
class myComponent extends React.Component {

     ...

     _closeModal() {
        const newOrder = this.state.data.map(element => {
           return element.id;
        });

        if (toJS(store.order) !== newOrder) {
           store.updateOrder(newOrder);
        }
     }
}

但是两个数组比较的结果是错误的,即使我不做任何更改,toJS(store.order) !== newOrder仍然return是正确的。我不知道自己做错了什么,但是当我用控制台记录这两个数组时,它们 return 内容完全相同。

在Javascript中,当两个数组引用同一个数组时,两个数组严格相等。所以[] === []returns错了!因为他们是不同的数组。

您可以这样更改您的代码:

if (JSON.stringify(toJS(store.order)) !== JSON.stringify(newOrder))