代码之家 › 专栏 › 技术社区 › fun joker

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

react-native reactjs javascript

fun joker · 技术社区 · 5 年前

当用户单击筛选选项日历打开,用户选择StartDate和Untildate时,最初的StartDate和Untildate未定义,当用户单击应用按钮时,该日期和Untildate将再次返回到上一屏幕。但最初的API端点URL: /api 当用户在选择StartDate和Untildate时返回到上一个屏幕时,API端点更改为 /api&start_date=${startDate}&end_date=${untilDate} 但是,使用新的API端点(即StartDate和EndDate)无法再次获取数据。

代码:

JIS:

<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 .

2 回复 | 直到 5 年前

Vishal Gupta 5 年前

希望这完全解决了你的问题。在使用前正确理解反应生命周期总是更好的。它总是能帮到你。

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");
    }

}

Sarmad 5 年前

你可以使用 willFocus 方法从 react-navigation , 例如在您的 componentDidMount()

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

假设你总是收到更新的时间和日期,如果你想确保你总是得到正确的日期,你可以 console.log() 里面 威尔福克斯 检查你的数据。

更新,如果这不能解决您的问题,您可以检查您的 componentDidUpdate

例如

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

这里,首先检查一下 startDate 和 untillDate 已更改,如果已更改,则调用API。