title: Function call after page reload in React
body: <p>I have a route like:</p>
  
  <pre><code>&lt;Route component={Bar} path="/foo/:num"/&gt;
  </code></pre>
  
  <p>I want to check if <code>num</code> exists in my database before rendering views inside <code>Bar</code> component. What I'm trying to do is utilizing <code>component mounting</code> functions as shown below to redirect to another route in case of invalid <code>num</code>:</p>
  
  <pre><code>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() {
      ... 
    }
  }
  </code></pre>
  
  <p>Here goes <code>index.js</code>, defining <code>isNumExist()</code>:</p>
  
  <pre><code>let foo = [...]; // Contains an array fetched from database
  function isNumExist(num){
    foo.map((element, i) =&gt; {
      if (foo[i].num == num) {
        return true;
      }
    });
    return false;
  }
  </code></pre>
  
  <p>Now on every page reload, the <code>isNumExist()</code> function triggers twice with <code>false</code> as output for second. So either <code>num</code> 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.</p>