React Native异步方法执行完成后传参跳转页面问题

问题分析 #

你当前的代码会在组件挂载后立即渲染NextScreen，此时getPost的异步请求还未完成，comments仍是初始空数组，无法传递请求后的有效数据。需要调整逻辑，等待异步请求完成并更新状态后，再执行页面跳转并传递结果。

解决方案 #

假设你使用React Navigation作为页面导航工具（RN主流导航方案），可以通过以下两种方式实现：

方式一：在componentDidMount中等待请求完成后跳转

修改componentDidMount方法，先等待getPost执行完毕，再调用导航方法跳转到目标页面：

async componentDidMount() {
  await this.getPost();
  // 跳转并传递comments数据
  this.props.navigation.navigate('NextScreen', { comments: this.state.comments });
}

方式二：利用setState的回调确保状态更新完成后跳转

由于setState是异步操作，直接在await getPost后跳转可能无法拿到最新状态，更可靠的方式是使用setState的第二个回调参数（状态更新完成后触发）：

async getPost(){
  const utils = new Utils();
  const responseJson = await utils.getPost("ok","yes");
  const comment = (responseJson?.posts ?? []).map((data) => data.comment);
  this.setState({ comments: comment }, () => {
    // 状态更新完成后执行跳转
    this.props.navigation.navigate('NextScreen', { comments: this.state.comments });
  });
  console.log("now i change state with new value");
}

调整原页面渲染逻辑 #

原页面在等待请求完成的过程中，可以显示加载状态，避免用户看到空白内容：

render(){ 
  return(
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>加载中...</Text>
    </View>
  )
}

注意事项 #

• 确保当前组件能通过props.navigation获取到导航实例（如果是嵌套组件，需要通过导航上下文或传递props的方式获取）；
• 如果使用其他导航工具，只需将navigation.navigate替换为对应工具的跳转方法即可。

内容的提问来源于stack exchange，提问作者Elly