なぜ私の反応レンダリングメソッドで無限ループを引き起こすonClickメソッドを追加しますか？

Question

無限ループの原因と思われる1行があります。私の要素にonClickハンドラを割り当てると問題が発生します。

ので、機能をレンダリングするには、以下が無限ループとは対照的に

button = <button onClick={ props.onLogin() }>Login</button>;

が発生し、次のループ

button = <button>Login</button>;

全コード

が発生することはありません。

import React, { Component, PropTypes } from 'react'; 
import { login, logout } from '../actions/user'; 
import { connect } from 'react-redux'; 

class Navbar extends Component { 

    render() { 
    const props = this.props; 
    const { user } = props; 
    const { isAuthenticated, errorMessage } = user; 

    let button; 

    // the onClick assignment below causes the infinite loop 
    if (isAuthenticated) { 
     button = <button onClick={ props.onLogout() }>Logout</button>; 
    } else { 
     button = <button onClick={ props.onLogin() }>Login</button>; 
    } 

    return (
     <div> 
     <a href="/">Hello</a> 
     <div> 
      <div>{errorMessage}</div> 
      { button } 
     </div> 
     </div> 
    ); 
    } 

} 

Navbar.propTypes = { 
    user: PropTypes.object, 
    errorMessage: PropTypes.string, 
}; 

const mapStateToProps = (state) => { 
    return { 
    user: state.user, 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onLogin:() => { 
     dispatch(login()); 
    }, 
    onLogout:() => { 
     dispatch(logout()); 
    }, 
    }; 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(Navbar); 

Answer 1

あなただけの関数を渡す、onClick属性内の関数を呼び出す必要はありませんので、それがなければならない：

// the onClick assignment below causes the infinite loop 
    if (isAuthenticated) { 
    button = <button onClick={ props.onLogout }>Logout</button>; 
    } else 
    button = <button onClick={ props.onLogin }>Login</button>; 
    }