React Native - 设置两个函数的顺序

Question

我是 React Native 的新手，所以提前致歉。
我有一个名为 setAllComments() 的函数，它从 componentDidMount 调用。
此函数执行 AsyncStorage.setItem()，我希望此函数在调用其他函数之前完成 - getComments()，
（执行 AsyncStorage.getItem() ).

问题是 getComments() 函数在 setAllComments() 函数完成之前执行。
我试图用回调函数来解决它，但这卡住了我的应用程序。

谁知道这两个函数的顺序怎么设置？

 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

您需要return一个信守承诺的链

  .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 也是异步的（但它不是 return 的承诺）。所以你需要传递一个回调。

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

此外，您正在混合使用 async/await 和一堆 then/catch 在整个代码中坚持使用一种方法（至少在一个函数中:)）

Answer 2

作为新手，您使用 asyn 做得很好，但这不是 async 应该工作的方式。 async 有一个很棒的功能或 "word" 可以使用，它叫做 "await"，正是您想要的。它等待一个异步函数，不需要使用“.then()”

你的异步函数应该像

 async componentDidMount() {

        await this.setAllComments();
        await this.getComments()
      }


  setAllComments = async () => {
    //console.log("setAllComments function!");
    var fetchresult = await fetch(URL + "/CommentsList2", {
      body: null,
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-type": "application/json; charset=UTF-8"
      }
    })
    fetchresult = await fetchresult.json()
    //console.log("function setAllComments - before comments parse");
    await AsyncStorage.setItem("@Project:comments", fetchresult.d).catch(err => {
        console.error(err);
      })
    //console.log("finished setItem")
  };

  async getComments() {
    //console.log("entered getCommens");
    let commentsList = await AsyncStorage.getItem("@Project:comments")
       commentsList = JSON.parse(Comments)
      this.setState({ comments: commentsList });
      //console.log(this.state.comments, "getComments - Player with comments");
    });
  }

React Native - 设置两个函数的顺序

React Native - set order for two functions

javascript

reactjs

react-native

asyncstorage