react-router 传递参数，父组件传递参数到子页面，执行两次。

Question

react-router版本
"react-router": "^3.0.0",
"react": "^15.5.4",

路由配置
<Route path="/imglivedetial/:mid/:type" component={ImageLiveDetial}/>

因为地址栏直接输入参数，不会更新props.parmars，所以都是在componentWillReceiveProps 和 componentDidMount执行一个共同自定义的刷新props函数 refreshProp()

refreshProp()做api请求或刷新状态。但是每次都执行两次。

求解

Answer 1

总得来说是我自己写的不严谨，算是曲线救国了，修改componentWillReceiveProps()变成

  componentWillReceiveProps(nextprops){
    let refresh = false;
    Object.keys(nextprops).forEach((value, index) => {
      if(nextprops[value] != this.props[value]){
        refresh = true;
      }
    })
    if(!refresh) return;
    this.refreshProps(nextprops);
  }

先在 componentWillReceiveProps 判定一下nextprops是否变化了，变化了则刷新组件，这个暂时解决了多个（超过两个）ajax请求的问题，有几个prop参数，componentWillReceiveProps 就会执行几遍。

然后把ajax请求拆分成单独的函数，判断必填ajax参数是否为空，为空就不执行，解决了两个ajax请求的问题（请求参数不严谨，为空也发送请求。）

Answer 2

这难道不是很明显吗？你自己在refreshProp打个断点，看下堆栈就好了。

以下是我的不基于事实的猜想：

页面挂载的时候执行一次componentDidMount，从而执行refreshProp

页面更新阶段（props改变）执行一次componentWillReceiveProps，从而执行refreshProp。

如果你想执行一次，为什么不把componentWillReceiveProps中的refreshProp删掉。