Function call after page reload in React

Question

I have a route like:

<Route component={Bar} path="/foo/:num"/>

I want to check if num exists in my database before rendering views inside Bar component. What I'm trying to do is utilizing component mounting functions as shown below to redirect to another route in case of invalid num:

import React, { Component } from 'react';
import {browserHistory} from 'react-router';
import { isNumExist } from '../../services/index.js';

class Bar extends Component {

  componentWillMount(){
    if (!isNumExist(this.props.params.num)){
      browserHistory.push('/home');
    }
  }

  render() {
    ... 
  }
}

Here goes index.js, defining isNumExist():

let foo = [...]; // Contains an array fetched from database
function isNumExist(num){
  foo.map((element, i) => {
    if (foo[i].num == num) {
      return true;
    }
  });
  return false;
}

Now on every page reload, the isNumExist() function triggers twice with false as output for second. So either num exists or not, the page redirects to the given route. Please correct me if I'm doing this in the wrong way or suggest the real issue preferably with details.

ur component name should be start with uppercase, instead of bar, use Bar — Mayank Shukla
– Mayank Shukla, Commented Feb 8, 2017 at 18:30
updated, it was just a typo due to replacing real code with sample code here. thanks for highlighting — Adil
– Adil, Commented Feb 8, 2017 at 18:43
Is your code executing before the database call (which I'm assuming is async) completes? — Matthew Herbst
– Matthew Herbst, Commented Feb 8, 2017 at 18:49
I have commented out rest of the code and just using custom array as let foo = [...]to make sure everything is running fine. Still having same issue — Adil
– Adil, Commented Feb 8, 2017 at 18:59

Adil · Accepted Answer · 2017-02-08 20:25:04Z

1

Your function will always return false because map function result is not returned.

let foo = [...]; // Contains an array fetched from database
function isNumExist(num){
  foo.map((element, i) => {
    if (foo[i].num == num) {
      return true;
    }
  });
  return false;
}

foo.map(...) will return an array but it is not returned at any time. The function signature from the function that is inside the map function is only for that function itself.

so try :

let foo = [...]; // Contains an array fetched from database
function isNumExist(num){
   var good_numbers_length = 0;
   var length = foo.map((element, i) => {
    if (foo[i].num == num) {
      good_numbers_length += 1;
    }
  });
  if (good_numbers_length > 0)
  {
        return true;
  }  
  return false;
}

In addition, browserHistory.push('/home'); does not create a proper redirect. Change it to something like window.location = 'url' or something react friendly like react-router.

edited Feb 8, 2017 at 20:25

Adil

22.6k7 gold badges31 silver badges56 bronze badges

answered Feb 8, 2017 at 19:18

Justin M. Ucar

8939 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Adil Over a year ago

Yes I already tried a similar thing that worked for me. I declared a variable with false as default value and updating it with true in case of valid num and returning the variable at the end of function.

Adil Over a year ago

But before redirecting, its still generating error because of invalid num used inside render(). What should i do to redirect before triggering render()?

Justin M. Ucar Over a year ago

Are you sure browserHistory.push('/home'); is actually the way to create a redirect. It seems like it only modifies your history. Shouldn;t it be like window.location = 'url' or some equivalent?

Adil Over a year ago

yes just confirmed that the problem is with browserHistory, I'm gonna replace it with redirect by react-router. Thanks

Justin M. Ucar Over a year ago

Nice, i will attach that part to the answer.

Alexandre Nicolas · Accepted Answer · 2017-02-08 18:53:58Z

0

You can put it in your react's entry point file (often name app.js or index.js) It's only called once per loading of the page.

So you just have to:

import your history dependency in your entry point file
use push function to go to '/home'

answered Feb 8, 2017 at 18:53

Alexandre Nicolas

1,94917 silver badges20 bronze badges

Collectives™ on Stack Overflow

Function call after page reload in React

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related