我是React Native的新手,所以我提前致歉。我有一个名为setAllComments()的函数,该函数从componentDidMount调用。该函数执行AsyncStorage.setItem(),并且我希望在调用另一个函数getComments()之前完成此函数(即AsyncStorage.getItem())。问题是在setAllComments()函数完成之前执行了getComments()函数。
我试图用回调函数解决它,但是这卡住了我的应用程序。
有谁知道如何设置这两个功能的顺序?
async componentDidMount() {
this.setAllComments();
}
setAllComments = () => {
console.log("setAllComments function!");
fetch(URL + "/CommentsList2", {
body: null,
method: "POST",
headers: {
Accept: "application/json",
"Content-type": "application/json; charset=UTF-8"
}
})
.then(res => {
return res.json();
})
.then(commentsResult => {
console.log("function setAllComments - before comments parse");
AsyncStorage.setItem("@Project:comments", commentsResult.d);
console.log("finished setItem");
})
.catch(err => {
console.error(err);
})
.then(this.getComments());
};
async getComments() {
console.log("entered getCommens");
await AsyncStorage.getItem("@Project:comments").then(value => {
let commentsList = JSON.parse(value);
this.setState({ comments: commentsList });
console.log(this.state.comments, "getComments - Player with comments");
});
}
最佳答案
您的方法有多个问题。
第一。 AsyncStorage
非常异步
AsyncStorage.setItem("@Project:comments", commentsResult.d);
console.log("finished setItem"); // not true
您需要返回承诺以保持承诺链
.then(commentsResult => {
console.log("function setAllComments - before comments parse");
return AsyncStorage.setItem("@Project:comments", commentsResult.d);
})
.then(() => console.log("finished setItem");) // now it is more likely :)
然后
.then(this.getComments());
您立即调用该函数应该是.then(() => this.getComments());
最后,
setState
也是异步的(但是atm不会返回promise)。因此,您需要传递一个回调。this.setState(
{ comments: commentsList },
() => console.log(this.state.comments, "getComments - Player with comments")
);
另外,您正在混合
async/await
w /一堆then/catch
坚持一种方法来遍历您的代码(至少在一个函数中:)