JSX onClick不斷評估，InternalError：太多遞歸

Question

我是React新手。任何人都可以向我解釋問題是什麼？看起來，onClick函數不斷從兩個按鈕觸發，導致無限遞歸。謝謝！

export class MyButtons extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { selectedIndex: 0 }; 

     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick(newIndex) { 
     this.setState({ 
      selectedIndex: newIndex 
     }); 
    } 

    render() { 
     return (
      <div> 
       <button onClick={this.handleClick(0)} >Button 0</button> 
       <button onClick={this.handleClick(1)} >Button 1</button> 
       <span>{this.state.selectedIndex}</span> 
      </div> 
     ); 
    } 
} 

Answer 1

參見：

this.handleClick(0)會火與渲染，無需點擊，因爲你調用該函數。

然後setState調用新的渲染和再次調用​​

onClick={() => this.handleClick(1)}會幫助你。

Answer 2

您需要傳遞功能不叫它

 <div> 
      <button onClick={() => this.handleClick(0)} >Button 0</button> 
      <button onClick={() => this.handleClick(1)} >Button 1</button> 
      <span>{this.state.selectedIndex}</span> 
     </div> 

其他的解決辦法是讓你​​返回功能

handleClick(newIndex) { 
    return() => this.setState({ 
     selectedIndex: newIndex 
    }); 
} 

render() { 
    return (
     <div> 
      <button onClick={this.handleClick(0)} >Button 0</button> 
      <button onClick={this.handleClick(1)} >Button 1</button> 
      <span>{this.state.selectedIndex}</span> 
     </div> 
    ); 
} 

而且（一更高性能的方法，因爲它不會在每個渲染調用中創建新的函數）可能會是ke在按鈕本身EP值（是的，是的<button> has value）

handleClick(event) { 
    this.setState({ 
     selectedIndex: +event.target.value 
    }); 
} 

render() { 
    return (
     <div> 
      <button value="0" onClick={this.handleClick} >Button 0</button> 
      <button value="1" onClick={this.handleClick} >Button 1</button> 
      <span>{this.state.selectedIndex}</span> 
     </div> 
    ); 
} 

Answer 3

<button onClick={() => this.handleClick(0)}>Button 0</button>