React 子传父-带参

父

<Senior
    calculate={(name,value)=>{this.calculate(name,value);}}
/>//前边的calculate是子的，后边的calculate(name,value)是父的，父的方法可以是别的名字
calculate(name,value) {
    console.log('look1', name, value);
}

子触发点击事件后，把值通过calculate()方法传给父

  onItemClick(status){
    const {calculate} = this.props;
    let command = status?'false':'true';
    calculate('onOffStatus',command);
  }  

1. 子的render触发一次，calculate('onOffStatus',command);也执行一次
2. 父的calculate(name,value)方法中调用调用this.setState()方法

两种情况同时存在，则会形成死循环。报如下错误：

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

因为

父的this.setState()方法会触发其render方法，继而走子的render方法，子执行calculate('onOffStatus',command)方法，给父传值，父再次setState...死循环。

如何避免

1、2不同时成立即可，如
子中的calculate('onOffStatus',command);不随render的触发而执行，让calculate('onOffStatus',command);有自己的触发事件，如点击事件等
或 父中得到子传来的值，不调用setState方法，这样就不会触发父的render方法