Question

最初的startDate和untilDate是当在过滤器选项日历用户点击打开和未定义被再次传递回前一画面时用户点击应用按钮，用户选择的startDate和untilDate。但是最初是API端点URL：/api，并且当用户在选择startDate和untilDate时返回上一屏幕时，API端点将更改为/api&start_date=${startDate}&end_date=${untilDate}，但不会通过新的api端点（即startDate和endDate。

代码：

visit.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取回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

您可以使用willFocus中的react-navigation方法，例如您的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。

如何通过数据导航道具（不工作）？

2 个答案: