React Navigation传参后API未重新请求数据问题排查

你的核心问题是：从筛选页面选择日期返回后，组件没有重新触发API请求。这是因为你只在componentWillMount（已过时的生命周期方法）里调用了一次getLeadSiteVisitReports，而这个方法只会在组件首次挂载时执行一次。当你从Filter页面返回时，组件已经处于挂载状态，不会再次触发componentWillMount，所以新的日期参数无法触发新的API请求。

下面提供两种针对类组件的有效修复方案，你可以根据自己的React Navigation版本选择：

方案1：监听导航参数变化（通用类组件方案） #

替换componentWillMount为componentDidMount，并添加componentDidUpdate生命周期方法，用来对比前后的日期参数，当参数变化时重新请求数据：

// 替换原来的componentWillMount
componentDidMount = () => {
  this.getLeadSiteVisitReports();
}

// 添加参数变化监听
componentDidUpdate = (prevProps) => {
  // 获取前后两次的日期参数
  const prevStartDate = prevProps.navigation.getParam('startDate');
  const prevUntilDate = prevProps.navigation.getParam('untilDate');
  const currentStartDate = this.props.navigation.getParam('startDate');
  const currentUntilDate = this.props.navigation.getParam('untilDate');

  // 如果任意一个日期参数发生变化，重新请求数据
  if (prevStartDate !== currentStartDate || prevUntilDate !== currentUntilDate) {
    this.getLeadSiteVisitReports();
  }
}

方案2：监听页面焦点事件（React Navigation全版本兼容） #

当从Filter页面返回时，Visit页面会重新获得焦点，我们可以监听这个事件来触发数据刷新：

componentDidMount = () => {
  this.getLeadSiteVisitReports();
  // 添加焦点监听：页面每次获得焦点时重新请求数据
  this.focusListener = this.props.navigation.addListener('focus', () => {
    this.getLeadSiteVisitReports();
  });
}

// 组件卸载时移除监听，避免内存泄漏
componentWillUnmount = () => {
  this.focusListener();
}

额外注意：确保Filter页面正确传递参数 #

在Filter页面的「应用」按钮点击事件中，要确保正确将日期参数传回Visit页面：

// Filter页面的应用按钮逻辑示例
onApplyFilter = () => {
  const { startDate, untilDate } = this.state;
  // 导航回Visit页面并携带参数
  this.props.navigation.navigate('Visit', { startDate, untilDate });
}

componentWillMount是React的旧生命周期方法，它仅在组件首次挂载时执行一次。当你从Filter页面返回时，Visit组件已经存在于导航栈中，不会重新触发挂载流程，因此不会再次调用getLeadSiteVisitReports，自然也就不会使用新的日期参数请求API。

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