2016-04-18 2 views
1

Je convertis observable-react-project en Redux. J'ai conteneur principal - app.js et son comprennent des méthodes suivantes:mapStateToProps non appelé lors du premier appel au composant

handleDone() { 
    this.setState({ showPLock: false }); 
} 

render() { 
    return (
     <div className="mainContainer"> 
      {this.props.children} 
      { 
       this.state.showPLock 
        ? <PCode handleDone={this.handleDone.bind(this)}/> 
        : null 
      } 
     </div> 
    ); 
} 

Dans la première application de démarrage showPLock: true. code PCode:

class PCode extends Component{ 
constructor (props) { 
    super(props); 

    this.state = { 
     passcode: '' 
    }; 
} 

render() { 
    //something doing 
} 
} 

PCode.contextTypes = { 
    router: PropTypes.object.isRequired, 
    store: PropTypes.object.isRequired 
}; 

PCode.propTypes = { 
    dispatch: PropTypes.func.isRequired, 
}; 

function mapStateToProps(stateStore) { 
    const { authReducer } = stateStore; 
    if (authReducer.pcode !== null) { 
     //something return 
    } 
} 

export default connect(mapStateToProps)(PCode); 

Un problème dans mapStateToProps d'appel. Il n'est pas appelé immédiatement au hit sur un composant. Par conséquent, si j'appelle rendre quelque chose, par exemple:

const { data } = this.props; 

bien sûr, émettra un indéfini.

Pourquoi mapStateToProps n'a pas été appelé lors du premier appel au composant?

Répondre

1

Oui, mapStateToProps doit s'exécuter lors du premier montage du composant.

Deux choses à vérifier:

  • Êtes-vous que la fonction n'est pas appelé? Assurez-vous de renvoyer un objet mapStateToProps, même si elle est juste un vide {}
  • La classe PCode devrait probablement d'étendre React.Component: class PCode extends React.Component {}
+0

1) fonction dans PCode mapStateCalled appelé, après l'appel mapStateCalled App.js 2) vérifié, tout droit – ximet

+0

@ximet est votre problème résolu? – mtaube

+0

Non. Vos deux choses ne résolvent pas mon problème – ximet

-2

Je suis en train. J'ai dit que pour simplifier cette question, j'étend React.Component ... Pas ce problème de vérification!