如何将数据作为导航道具传递(不起作用)

Question

当用户单击过滤器选项日历打开并且用户选择开始日期和直到日期时，初始开始日期和untilDate未定义，当用户单击应用按钮时，该日期将再次传递回上一个屏幕。但最初 API 端点 URL ：/api，当用户在选择 startDate 和 untilDate 时返回上一个屏幕时，API 端点将更改为 /api&start_date=${startDate}&end_date=${untilDate} 但数据不会使用新的 api 端点（即 startDate 和 endDate）再次获取。

法典：

访问.js：

<TouchableOpacity onPress={() => navigation.navigate('Filter')}>
      <Image source={require('../assets/filter.png')} style={{width: 24, height: 24, marginRight: 15, resizeMode: 'contain'}}/>
</TouchableOpacity>

API request is made in below code and above code is filter button which opens up calendar

getLeadSiteVisitReports = () => {
        const startDate = this.props.navigation.getParam('startDate');
        const untilDate = this.props.navigation.getParam('untilDate');
        API.getLeadSiteVisitReportsForProject(this.props.logged_in_user, this.props.current_project, startDate, untilDate)
        .then((res) => {
            this.setState({ leadsitevisits: res });
        })
        .catch((err) => {
            console.log("Error in getLeadSiteVisitReportsForProject", err);
        });
    }
    componentWillMount = () => {
        this.getLeadSiteVisitReports();
    }

Iniside fetch-data.js：

export const getLeadSiteVisitReportsForProject = (logged_in_user, project, startDate, untilDate) => {
  if (startDate === undefined && untilDate === undefined){
      const URL = API_URL + `/lead_site_visit_report?user=${logged_in_user.id}&project=${project.id}`;  
      console.log("getLeadSiteVisitReportsForProject: ", URL);
      return fetchGet(URL);
  } else {
      const URL = API_URL + `/lead_site_visit_report?user=${logged_in_user.id}&project=${project.id}&start_date=${startDate}&end_date=${untilDate}`;
      console.log("getLeadSiteVisitReportsForProject: ", URL);
      return fetchGet(URL);
  }
}

因此，将获取默认数据，

但是当选择startDate和untilDate时，不会通过调用另一个API端点来获取时间数据，请参见上文getLeadSiteVisitReportsForProject。

Answer 1

希望这完全解决了您的问题。在使用之前，最好正确了解反应生命周期。它将始终为您提供帮助。

getLeadSiteVisitReports = （） => {

    const startDate = this.props.navigation.getParam('startDate');
    const untilDate = this.props.navigation.getParam('untilDate');
    console.log("Before making GET req: ", startDate);
    console.log("Before making GET req: ", untilDate);

    API.getLeadSiteVisitReportsForProject(this.props.logged_in_user, this.props.current_project, startDate, untilDate)
    .then((res) => {
        this.setState({ leadsitevisits: res });
    })
    .catch((err) => {
        console.log("Error in getLeadSiteVisitReportsForProject", err);
    });
}
componentWillMount = () => {
    // TODO: Get lead site visits
    this.getLeadSiteVisitReports();
}
componentDidUpdate = (prevProps, prevState) => {
    console.log("Previos props : ",prevProps);
    console.log("props: ", this.props);
    if(this.props && this.props.navigation && this.props.navigation.state && 
       this.props.navigation.state.params && 
       this.props.navigation.state.params.startDate) {
        // call your api here.
        this.getLeadSiteVisitReports();
        console.log("End end end end end end end end");
    }

}

Answer 2

你可以

使用react-navigation willFocus的方法，例如在您的componentDidMount()

componentDidMount() {
this.props.navigation.addListener('willFocus', () => {
this.getLeadSiteVisitReports();
 }),
}

假设您始终收到更新的时间和日期，并且如果您想确保始终获得正确的日期，则可以console.log() willFocus内部检查您的数据。

更新，如果这不能解决您的问题，您可以检查componentDidUpdate内的日期更改

例如

componentDidUpdate(prevProps, prevState) {
 if(prevState.startDate !== this.state.startDate | prevState.untilDate !== this.state.untilDate) {
  // call your api here.
  this.getLeadSiteVisitReports();
  }
}

在这里，首先检查您的startDate和untillDate是否更改，如果是，则调用 API。