Question

我是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");
    });
  }

Answer 1

您的方法有多个问题。

首先。 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不会返回承诺）。因此，您需要传递一个回调。

this.setState(
  { comments: commentsList },
  () => console.log(this.state.comments, "getComments - Player with comments")
);

另外，您正在混合async/await和一堆then/catch并坚持使用一种方法遍历代码（至少在一个函数中：））

Answer 2

对于新手来说，使用asyn可以做的很棒，但这不是异步应该起作用的方式。异步有一个很棒的功能或“单词”可以使用，它叫做“等待”，正是您想要的。它等待一个异步函数，不需要使用“ .then（）”

您具有异步功能的函数应该类似于

np.reshape

React Native-设置两个功能的顺序

2 个答案: