React Rest呼叫赛车

Question

我正在使用SharePoint Framework开发web部件，我的代码基本上是调用两个方法来从SharePoint Online获取信息，当我在render((方法上调用这些方法时，我得到了如下结果：

---RENDER START---

---完成RENDER---

• GetItems((=>ID:1标题：新办公室
• GetItems((=>ID:2标题：中期评论
• GetItems((=>ID:3标题：DevOps培训

• GetItems((=>ID:4标题：与我们合作！

  -GetAttachments((=>ID:2文件名：reviews.jpeg

  -GetAttachments((=>ID:1文件名：new-office.jpg

  -GetAttachments((=>ID:3文件名：devops.jpeg

  -GetAttachments((=>ID:4文件名：careers.png

我希望调用这些方法并将它们的结果返回给我，然后在我的自定义HTML渲染中使用它们，预期的结果如下：

---RENDER START---

• GetItems((=>ID:1标题：新建Office

  -GetAttachments((=>ID:1文件名：reviews.jpeg

• GetItems((=>ID:2标题：中期评论

  -GetAttachments((=>ID:2文件名：new-office.jpg

• GetItems((=>ID:3标题：DevOps培训

  -GetAttachments((=>ID:3文件名：devops.jpeg

• GetItems((=>ID:4标题：与我们合作！

  -GetAttachments((=>ID:4文件名：careers.png

---已完成归还---

//使用自定义HTML中返回的结果来呈现

现在代码正在运行"wild"，htmlAttachments变量没有收到任何结果，并且渲染完全为空，在渲染之前应该如何获取结果？

这是我的代码：

public async GetItems() : Promise<IListItems>
{
let formattedResponse: IListItems = {value: []};
await pnp.sp.web.lists.getByTitle('LIST').items.select('Id, Title, Body, Link').get().then( response => {
response.map( (object: any, i: number) => {
formattedResponse.value.push( {Id : object.Id, Title: object.Title, Body: object.Body, Link : object.Link.Url} );
});      
});
return formattedResponse;
}
public async GetAttachments(itemId: number) : Promise<IFileItems>
{
let formattedResponse: IFileItems = {value: []};
await pnp.sp.web.lists.getByTitle('LIST').items.getById(itemId).attachmentFiles.get().then( response => {
response.map( (object: any, i: number) => {
formattedResponse.value.push( {Id : itemId, FileName: object.ServerRelativeUrl} );
});
});
return formattedResponse;
}
public render() : void
{
let htmlAttachments: string = '';
htmlAttachments += '<ul>';
this.GetItems().then( (responseItems: IListItems) => {
responseItems.value.forEach( elementItems => {
console.log("GetItems() ==> ", elementItems.Id, elementItems.Title);
this.GetAttachments(elementItems.Id).then( (responseAtt: IFileItems) => {
responseAtt.value.forEach( elementAtt => {
console.log("t GetAttachments() ==> ", elementAtt.Id, elementAtt.FileName);
htmlAttachments += '<li>' + 'ID: ' + elementAtt.Id + ' - Title: ' + elementAtt.FileName + '</li>';
});
});
});
});
htmlAttachments += '</ul>';
this.domElement.innerHTML = htmlAttachments;
}

Answer 1

这有点晚，但您可以去掉GetAttachments方法本身。

在第一个调用GetItems中，您可以获取附件文件，然后在HTML中使用它们。

您可以从以下示例代码进行修改：

public async GetItems() : Promise<IListItems>
{
let formattedResponse: IListItems = {value: []};
await pnp.sp.web.lists.getByTitle("LIST")
.items
.select("Id", "Title", "Body", "Link","AttachmentFiles")
.expand("AttachmentFiles")
.get()
.then(response => {
response.map((object: any, i: number) => {
formattedResponse.value.push({
Id : object.Id, 
Title: object.Title, 
Body: object.Body, 
Link : object.Link.Url, 
FileName: object.AttachmentFiles[0].FileName, 
FileUrl : object.AttachmentFiles[0].ServerRelativeUrl
});
});
});
return formattedResponse;
}

参考-使用PnP JS 中的列表项