父
<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方法