将数组与可观察的 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))
我的 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))