- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
正如标题所示,我正在尝试使用 promise 来设置我的 react 组件的状态。很简单,对吧?也许不会。当我尝试在 Promise 中进行后续的 ajax 调用时,问题就出现了。
代码如下。正如您所看到的,我正在尝试映射我返回的数据并创建一个新对象。在创建该对象时,还有另一个 promise 调用,该调用应该设置其中一个字段。所有这些都可以正常工作,但是状态是在第二个 promise 完成之前设置的,并且该字段对我不可用。
我尝试使用 async/await 让它等待调用完成,但这种方法也没有成功。
如果您有任何建议,我们将不胜感激。
我正在 ComponentDidMount 方法中进行调用:
public componentDidMount(): void {
this._spApiService
.getListItems(this.props.context, "Company News")
.then((spNewsStories: SpNewsStory[]) => {
return spNewsStories.map((newsStory: SpNewsStory) => {
return new AdwNewsStory(newsStory, this.props.context);
});
})
.then((adwNewsStories: AdwNewsStory[]) => {
this.setState({
topStories: adwNewsStories,
});
});
}
这是进行第二个 ajax 调用的 AdwNewStory 类:
import { SpNewsStory } from "./SpNewsStory";
import { ISpApiService } from "../../interfaces/ISpApiService";
import SpApiService from "../../services/SpApiService";
import { WebPartContext } from "../../../node_modules/@microsoft/sp-webpart-
base";
import { SpAttachment } from "../SpAttachment";
import IEnvironmentService from "../../interfaces/IEnvironmentService";
import EnvironmentService from "../../services/EnvironmentService";
import { IAdwDateTimeService } from "../../interfaces/IAdwDateTimeService";
import AdwDateTimeService from "../../services/AdwDateTimeService";
class AdwNewsStory {
public id: number;
public title: string;
public publishDate: string;
public storySummary: string;
public storyLink: string;
public windowTarget: string;
public imageUrl: string;
public imageAlternativeText: string;
public attachments: boolean;
private _spApiService: ISpApiService;
private _context: WebPartContext;
private _environmentService: IEnvironmentService;
private _adwDateTimeService: IAdwDateTimeService;
constructor(spNewsStory: SpNewsStory, context?: WebPartContext) {
this._spApiService = new SpApiService();
this._context = context;
this._environmentService = new EnvironmentService();
this._adwDateTimeService = new AdwDateTimeService();
this.buildAdwNewsStory(spNewsStory);
}
private buildAdwNewsStory = (spNewsStory: SpNewsStory): void => {
this.id = spNewsStory.Id;
this.title = spNewsStory.Title;
this.publishDate = this.setPublishDate(spNewsStory.PublishDate);
this.storySummary = spNewsStory.StorySummary;
this.storyLink = spNewsStory.Link.Description;
this.windowTarget = spNewsStory.WindowTarget;
this.imageAlternativeText = spNewsStory.ImageAlternateText;
this.attachments = spNewsStory.Attachments;
if (this.attachments) {
this.setImageUrl();
}
};
private setImageUrl = (): void => {
this._spApiService.getListItemAttachments(this._context, "Company News", this.id).then(attachments => {
const siteUrl: string = this._environmentService.getSiteUrl();
const attchmentUrl: string = `${siteUrl}/Lists/Company%20News/Attachments/${this.id}/${attachments[0].FileName}`;
this.imageUrl = attchmentUrl;
});
};
private setPublishDate = (dateString: string) => {
const publishDate: Date = new Date(dateString);
return `${this._adwDateTimeService.getMonthName(publishDate.getMonth())} ${publishDate.getDate()}, ${publishDate.getFullYear()}`;
};
}
export default AdwNewsStory;
最佳答案
这里有几个问题。首先:
private setImageUrl = (): void => {
// You aren't returning this promise here, so there's no way for
// calling code to get notified when the promise resolves
this._spApiService.getListItemAttachments(this._context, "Company News", this.id).then(attachments => {
const siteUrl: string = this._environmentService.getSiteUrl();
const attchmentUrl: string = `${siteUrl}/Lists/Company%20News/Attachments/${this.id}/${attachments[0].FileName}`;
this.imageUrl = attchmentUrl;
});
};
然而,更大的问题是您从构造函数中调用该方法。您确实不希望构造函数进行异步调用。虽然没有技术理由不这样做,但实际上没有办法将该 promise 返回给调用者。这会导致像您遇到的那样的错误。
我建议将 buildAdwNewsStory()
方法移出构造函数,并单独调用它,因为它涉及异步调用。
class AdwNewsStory {
// ... fields...
constructor(context?: WebPartContext) {
this._spApiService = new SpApiService();
this._context = context;
this._environmentService = new EnvironmentService();
this._adwDateTimeService = new AdwDateTimeService();
}
public buildAdwNewsStory(spNewsStory: SpNewsStory): Promise<void> {
this.id = spNewsStory.Id;
this.title = spNewsStory.Title;
this.publishDate = this.setPublishDate(spNewsStory.PublishDate);
this.storySummary = spNewsStory.StorySummary;
this.storyLink = spNewsStory.Link.Description;
this.windowTarget = spNewsStory.WindowTarget;
this.imageAlternativeText = spNewsStory.ImageAlternateText;
this.attachments = spNewsStory.Attachments;
if (this.attachments) {
return this.setImageUrl();
} else {
return Promise.resolve();
}
}
...
private setImageUrl() {
return this._spApiService.getListItemAttachments(this._context, "Company News", this.id)
.then(attachments => {
const siteUrl: string = this._environmentService.getSiteUrl();
const attchmentUrl: string = `${siteUrl}/Lists/Company%20News/Attachments/${this.id}/${attachments[0].FileName}`;
this.imageUrl = attchmentUrl;
});
}
}
然后从您的componentDidMount
:
public componentDidMount(): void {
this._spApiService
.getListItems(this.props.context, "Company News")
.then((spNewsStories: SpNewsStory[]) =>
spNewsStories.map((newsStory: SpNewsStory) => {
var story = new AdwNewsStory(this.props.context);
return story.buildAdwNewsStory(newsStory);
})
)
.then((adwNewsStories: AdwNewsStory[]) => {
this.setState({
topStories: adwNewsStories,
});
});
}
顺便说一句,如果您转向 async/await
而不是直接使用 Promise
方法 (.然后
/.catch
)
关于javascript - 在 promise 调用完成之前设置状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51617019/
如何从 promise 中退出 promise ? perl6 文档没有提供简单的方法。例如: my $x = start { loop { # loop forever until "qui
我的用户 Controller 中有一个索引操作,其中我试图连续做两件事,并且在它们都有机会完成之前不执行所需的 res.json() 方法。 我有一个加入用户的友谊加入模型。一列是 friender
请帮我解释一下为什么日志结果有两种不同: 方式 1:每 1 秒顺序记录一次 方式 2:1 秒后记录所有元素。 // Way 1 let sequence = Promise.resolve(); [1
我的问题很简单。 Promise.all() 方法可以返回 Promise 吗?让我解释一下: function simpleFunction() { let queue = [];
我正在使用 Promise 从存储中读取文件并转换为 base64 字符串。我有图像数组,使用 RNFS 读取图像 const promise_Images = _Images.map(async (
如果使用非空数组调用 Promise.all 或 Promise.race,它们将返回一个待处理的 Promise: console.log(Promise.all([1])); // prints
Promise.all 是否可以在没有包装 promise 的情况下返回链的最后一个值? 如果不使用 await,它在我的上下文中不起作用 没有包装的例子: function sum1(x){ r
我一直在玩 promise,通常能想出如何处理好它们,但在这种情况下,我不知道如何删除一个 promise-wrapping level。 代码如下: let promise2 = promise1.
考虑以下嵌套的Promises结构: const getData = async() => { const refs = [{ name: "John33", age: 3
我已经阅读了 Promise/A+ 规范,但据我了解,还有诸如 Promise/A 和 Promise 之类的东西。它们之间有什么区别? Promise 和 Promise/A 规范也是如此吗?如果是
当我运行以下代码时: my $timer = Promise.in(2); my $after = $timer.then({ say "2 seconds are over!"; 'result'
以下简单的 promise 是发誓的,我不允许打破它。 my $my_promise = start { loop {} # or sleep x; 'promise re
我正在尝试扩展Promise: class PersistedPromise extends Promise { } 然后在派生类上调用静态resolve以直接创建一个已解决的Promise: Per
我有两个返回 promise 的函数,我独立使用它们作为: getLocal().then(...) 和 getWeb().then(...) 但是现在我遇到了一个奇怪的问题: 1) 我需要第三个
我不知道 promise.all 解决方案中的 promise.all 是否是一个好的实践。我不确定。 我需要从一组用户获取信息,然后通过此信息响应,我需要发送消息通知。 let userList =
我一直在尝试使用 queueMicrotask() 函数,但我没有弄清楚当回调是微任务时回调的优先级如何。查看以下代码: function tasksAndMicroTasks() { const
我一直在尝试使用 queueMicrotask() 函数,但我没有弄清楚当回调是微任务时回调的优先级如何。查看以下代码: function tasksAndMicroTasks() { const
今年早些时候,我在 Pharo Smalltalk 参与了一个 promise 项目。这个想法是为了实现以下行为: ([ 30 seconds wait. 4 ]promiseValue )then:
大家好,提前感谢您的帮助。 下面是我正在尝试做的事情 function1(){ throw some error(); } function2() { // dosomething suc
我有以下未解析的代码。f2 解决了,所以我不会添加该代码,它是 f1 我有问题。 我调用函数,它到达最里面如果,它调用函数“find”,它执行函数 findId,完美返回 Id,然后执行 editId
我是一名优秀的程序员,十分优秀!