仅在调用第一个函数后才调用第二个函数-本机反应答案

【问题标题】：call second function only after first function has been called - react native仅在调用第一个函数后才调用第二个函数-本机反应
【发布时间】：2019-06-01 08:52:50
【问题描述】：

我刚开始使用 react native，我正在从 API 中提取数据。第一个函数成功调用数据，第二个函数需要第一个函数的变量才能成功调用。我正在尝试使第二个 API 调用成功，但它失败了

componentDidMount = async () => {
const communities = await API.getUserCommunityInfo(userId);
console.log(communities)
this.setState({userCommunities: communities, communityMemberId: communities[0].member.id, communityId: communities[0].community.id}, 
console.log(this.state),
this.getGroups()
)

}

第二个功能

getGroups = async () => {
const groups = await API.getGroups(communityMemberId)
this.setState({userGroups: groups ,showLoader: false})
}

第二个函数在成功调用之前需要第一个函数communityMemberId的状态

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

您没有正确传递回调。通过将回调传递给.setState()，第二个函数将在第一个函数完成设置状态后运行。

componentDidMount = async () => {
  const communities = await API.getUserCommunityInfo(userId);
  console.log(communities);
  this.setState(
    {
      userCommunities: communities,
      communityMemberId: communities[0].member.id,
      communityId: communities[0].community.id
    },
    () => {
      console.log(this.state);
      this.getGroups()
    }
  );
};

getGroups 函数

getGroups = async () => {
  const groups = await API.getGroups(this.state.communityMemberId)
  this.setState({userGroups: groups ,showLoader: false})
}

【讨论】：

【解决方案2】：

您可以检查第一个函数是否响应，如果成功则调用第二个函数。

getGroups = async () => {
const groups = await API.getGroups(communityMemberId)
this.setState({userGroups: groups ,showLoader: false})
   if(succees){
    //call second function
    this.secondFunction()
   }
}

【讨论】：

【解决方案3】：

只需将属性添加到第二个函数中，或者在 setState 完成后添加回调函数。

componentDidMount = async () => {
    const communities = await API.getUserCommunityInfo(userId);
    console.log(communities)
    this.setState({
       userCommunities: communities, 
       communityMemberId: communities[0].member.id, 
       communityId: communities[0].community.id
    }, () => {
        this.getGroups(this.state.communityMemberId); // callback function after the state is updated
    });
    // or 
    this.getGroups(communities[0].member.id); // this is faster since user don't wait state to be updated
}

getGroups = async (communityMemberId) => {
    const groups = await API.getGroups(communityMemberId)
    this.setState({userGroups: groups ,showLoader: false})
}

【讨论】：

setState 是异步的，有可能当第二个函数的状态没有设置。
你不需要传递this.state.communityMemberId这是在状态并且可以从this.getGroups()访问而不需要作为参数传递它。
我的示例将 communityMemberId 作为参数传递给 getGroup 函数。我更喜欢 this.getGroups(communities[0].member.id);因为它更快，而且用户不必等待 this.setState 方法完成。