我有一个补丁请求,看起来像这样:
patchSharingStatus(id: string): Observable<Idea> {
return this.http.patch<Idea>(this.ideaApiUrl + '/' + id + '/sharing', {});
}它命中我的API,我的API返回一个包含两个字段的对象,一个名为sharingEnabled,另一个名为sharingLink。
我在这里使用patchSharingStatus():
toggleSharing(id: string) {
this.bigIdeaService.patchSharingStatus(id).subscribe(res => {
const oldItemIndex = this.activeProjectAndAssessmentDetails.find(item => item.parentIdeaId === res.bigIdeaId).parentIdeaId;
console.log('oldItemIndex', oldItemIndex);
console.log('oldItem', this.activeProjectAndAssessmentDetails.find(item => item.parentIdeaId === res.bigIdeaId));
console.log('res.sharingEnabled', res.sharingEnabled);
console.log('res.sharingLink', res.sharingLink);
// The below line is (view.page.ts:81) from the below stack trace.
this.activeProjectAndAssessmentDetails[oldItemIndex].sharingEnabled = res.sharingEnabled; // <== This is (view.page.ts:81) from the below stack trace.
this.activeProjectAndAssessmentDetails[oldItemIndex].sharingLink = res.sharingLink;
});
}在我的浏览器控制台中,我看到了以下内容:
oldItemIndex 58832ca4-ef93-4aa5-a670-83dc4384c306
instrument.ts:129 oldItem {sharingEnabled: true
sharingLink: "http://localhost:8100/sharing/item/df5a3bb0-8c46-4c4c-a70a-37a3465fe62b" ...}
instrument.ts:129 res.sharingEnabled true
instrument.ts:129 res.sharingLink http://localhost:8100/sharing/item/65a27b76-b65f-4dfe-b013-0b1a9c8254db
instrument.ts:129 TypeError: Cannot set property 'sharingEnabled' of undefined
at SafeSubscriber._next (view.page.ts:81)
at SafeSubscriber.__tryOrUnsub (Subscriber.ts:265)
at SafeSubscriber.next (Subscriber.ts:207)
at Subscriber._next (Subscriber.ts:139)
at Subscriber.next (Subscriber.ts:99)
at MapSubscriber._next (map.ts:89)
at MapSubscriber.next (Subscriber.ts:99)
at FilterSubscriber._next (filter.ts:101)
at FilterSubscriber.next (Subscriber.ts:99)
at MergeMapSubscriber.notifyNext (mergeMap.ts:162)
at SimpleInnerSubscriber._next (innerSubscribe.ts:30)
at SimpleInnerSubscriber.next (Subscriber.ts:99)
at CatchSubscriber._next (Subscriber.ts:139)
at CatchSubscriber.next (Subscriber.ts:99)
at MergeMapSubscriber.notifyNext (mergeMap.ts:162)
at SimpleInnerSubscriber._next (innerSubscribe.ts:30)
at SimpleInnerSubscriber.next (Subscriber.ts:99)
at XMLHttpRequest.onLoad (xhr.ts:215)
at XMLHttpRequest.sentryWrapped (helpers.ts:87)
at ZoneDelegate.invokeTask (zone.js:429)
at Object.onInvokeTask (core.js:28500)
at ZoneDelegate.invokeTask (zone.js:428)
at Zone.runTask (zone.js:200)
at ZoneTask.invokeTask [as invoke] (zone.js:511)
at invokeTask (zone.js:1651)
at XMLHttpRequest.globalZoneAwareCallback (zone.js:1688)这个错误会告诉我上面打印的响应数据不包含名为sharingEnabled的字段,或者它可能包含,但它是空的。事实并非如此。我已经检查了来自API的响应,它很好,我可以在上面看到这些值被正确填充。
我甚至可以在我的前端看到返回的数据正在显示!
怎么回事?这是一个令人讨厌的错误,我想摆脱它。有人能帮上忙吗?
编辑:
为了在这里添加更多上下文,我有一个呈现数据的angular组件。为数组中的每个项目创建一个组件(它是一个想法列表)。这些组件中的每一个都有一个从父页面传入的想法。每个组件都有一个发射器,该发射器在组件的父页面中触发一个方法-这就是方法调用patchSharingStatus()。
toggleSharing()也在父级中。this.activeProjectAndAssessmentDetails也在父级中,这是驱动所有组件的阵列。toggleSharing()从API获取响应,并修改响应所涉及的项,然后我依赖于该更改使子组件重新呈现(React做了类似的事情-这是它的工作方式吗?)
编辑2:根据Nicholas_Jones,我添加了一条if语句来检查oldItemIndex是否为空。
这是toggleSharing的更新版本
toggleSharing(id: string) {
this.bigIdeaService.patchSharingStatus(id).subscribe(res => {
const oldItemIndex = this.activeProjectAndAssessmentDetails.find(item => item.parentIdeaId === res.bigIdeaId).parentIdeaId;
console.log('oldItemIndex', oldItemIndex);
console.log('res.bigIdeaId', res.bigIdeaId);
if (!this.activeProjectAndAssessmentDetails[oldItemIndex]) { console.log('im undefined'); }
this.activeProjectAndAssessmentDetails[oldItemIndex].sharingEnabled = res.sharingEnabled;
this.activeProjectAndAssessmentDetails[oldItemIndex].sharingLink = res.sharingLink;
});
}和新的堆栈跟踪:
oldItemIndex 9360d92d-e04c-4069-872d-dca880d9f1eb
instrument.ts:129 res.bigIdeaId 9360d92d-e04c-4069-872d-dca880d9f1eb
instrument.ts:129 im undefined
instrument.ts:129 TypeError: Cannot set property 'sharingEnabled' of undefined
at SafeSubscriber._next (view.page.ts:82)
at SafeSubscriber.__tryOrUnsub (Subscriber.ts:265)
at SafeSubscriber.next (Subscriber.ts:207)
at Subscriber._next (Subscriber.ts:139)
at Subscriber.next (Subscriber.ts:99)
at MapSubscriber._next (map.ts:89)
at MapSubscriber.next (Subscriber.ts:99)
at FilterSubscriber._next (filter.ts:101)
at FilterSubscriber.next (Subscriber.ts:99)
at MergeMapSubscriber.notifyNext (mergeMap.ts:162)
at SimpleInnerSubscriber._next (innerSubscribe.ts:30)
at SimpleInnerSubscriber.next (Subscriber.ts:99)
at CatchSubscriber._next (Subscriber.ts:139)
at CatchSubscriber.next (Subscriber.ts:99)
at MergeMapSubscriber.notifyNext (mergeMap.ts:162)
at SimpleInnerSubscriber._next (innerSubscribe.ts:30)
at SimpleInnerSubscriber.next (Subscriber.ts:99)
at XMLHttpRequest.onLoad (xhr.ts:215)
at XMLHttpRequest.sentryWrapped (helpers.ts:87)
at ZoneDelegate.invokeTask (zone.js:429)
at Object.onInvokeTask (core.js:28500)
at ZoneDelegate.invokeTask (zone.js:428)
at Zone.runTask (zone.js:200)
at ZoneTask.invokeTask [as invoke] (zone.js:511)
at invokeTask (zone.js:1651)
at XMLHttpRequest.globalZoneAwareCallback (zone.js:1688)不幸的是,null检查被触发了,但是在我打印了oldItemIndex并看到有一个值之后才打印出来!
所以这可能是某种竞争条件?
发布于 2021-02-08 12:15:38
你可以让console.log(this.activeProjectAndAssessmentDetailsoldItemIndex)只是为了确保数据,并将堆栈跟踪发送给我。也是this.activeProjectAndAssessmentDetails.length和oldItemIndex的console.log
https://stackoverflow.com/questions/66095739
复制相似问题