browserHistory.push ('/ test') Kann nicht springen?

Question

Warum funktioniert die Schaltfläche onClick?

Warum funktioniert {this.test.bind (this)} nicht?

Wenn Sie auf die Schaltfläche Ereignisse Taste klicken, können normal sein und springen zurück

{this.test.bind (this)} funktioniert nicht.

Wenn Sie die {this.test()} es funktioniert, aber es wird einige Fehler

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)} eine neue Funktion erstellt und ist nicht wirklich Ausführen der Funktion.

Die Taste funktioniert, wenn die Taste gedrückt wird, wird die onClick Funktion ausgeführt.

this.test() löst diese Warnung aus, da das Rendering für jede Komponente mehrfach ausgeführt wird.

Wenn Sie /test zu navigieren versuchen, wenn die Komponentenhalterungen dann sollten Sie die React lifecycle method verwenden componentDidMount()

Wenn nicht, sollten Sie {this.test.bind(this)} aus Ihrer Komponente entfernen.