browserHistory.push（ '/ test'）ジャンプできませんか？

Question

なぜボタンのonClick機能が機能しますか？

{this.test.bind（this）}はなぜ機能しませんか？

あなたはボタンのボタンイベントが正常であるとバック

{this.test.bind（これは）}は動作しませんジャンプすることができますをクリックした場合。

あなたは{）（this.test}を使用している場合、それは動作しますが、いくつかのエラー

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`. 

import React, {Component, PropTypes} from "react"; 
 
import {browserHistory} from 'react-router'; 
 
import {connect} from "react-redux"; 
 
import * as authActions from "../../actions/auth"; 
 
import {LoginForm} from "../../components"; 
 

 
@connect(
 
    state => ({ 
 
     user: state.async.user, 
 
     userState: state.async.loadState && state.async.loadState.user 
 
    }), 
 
    authActions 
 
) 
 
class Login extends Component { 
 
    static propTypes = { 
 
     user: PropTypes.any, 
 
     userState: PropTypes.any, 
 
     login: PropTypes.func.isRequired, 
 
    }; 
 

 
    test() { 
 
     browserHistory.push('/test'); 
 
    } 
 

 
    render() { 
 
     const {user, userState, login} = this.props; 
 
     require('./Login.scss'); 
 
     return (
 
      <div> 
 
       <button type="button" onClick={this.test.bind(this)}>test</button> 
 
       {this.test.bind(this)} 
 
       <LoginForm onSubmit={login}/> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 
export default Login;

Answer 1

{this.test.bind(this)}があるだろうが、新しい関数を作成し、実際にではありません関数を実行する。

ボタンを押すと、onClick機能が実行されるため、ボタンが機能します。

this.test()は、どのコンポーネントでもレンダリングが複数回実行されるため、その警告をスローします。

あなたは/testに移動しようとしている場合でない場合はコンポーネントのマウントは、あなたがReact lifecycle methodcomponentDidMount()

を使用する必要があるとき、あなたはあなたのコンポーネントから{this.test.bind(this)}を削除する必要があります。