Question

我的store / 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仍然返回true。我不知道我在做什么错，但是当我用控制台记录两个数组时，它们返回的内容完全相同。

Answer 1

在Javascript中，当两个数组都引用相同的数组时，它们是严格相等的。因此[] === []返回false！因为它们位于不同的数组中。

您可以通过以下方式更改代码：

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

比较数组与可观察的MobX可观察数组

1 个答案: