réagir componentDidMount pas de tir

- Je configurer un nouveau projet react et pour une raison quelconque, le componentDidMount méthode n'est pas appelée.

J'ai vérifié ce problème en plaçant un appel à console.log dans componentDidMount mais je ne peut pas voir sa sortie dans la console.

En outre, this.setState() ne fonctionne pas.

Je suis assez perplexe quant à pourquoi les componentDidMount n'est pas appelée. J'ai essayé d'utiliser à la fois Réagir "v0.14.0" et "v0.14.3".

Pourquoi est - 'componentDidMount" n'étant pas appelé?

Code:

var React = require('react');

var RecipePage = React.createClass({
  componentDidMount: function() {
    console.log('mounted!');
  },
  render: function() {
    return (
      <div>Random Page</div>
    );
  }
});

module.exports = RecipePage;
  • Avez-vous réellement utiliser RecipePage quelque part, en quelque sorte? Vous êtes l'exportation de quelque chose d'autre.
  • Salut @zerkms. Édité mon code, de sorte que les renvois à l'exportation le nom correspond à "RecipePage". Bougresse...toujours la même erreur...
  • Quelle est l'erreur? .....
  • Voulais dire que j'obtiens le même résultat...comme dans la "console.journal" à l'intérieur de la componentDidMount n'est-ce pas de tir. Le composant rend mais rien passé "getInitialState" et "rendu" ne fonctionne pas
InformationsquelleAutor user3295436 | 2015-11-30
  1. 39

    Ce qui m'est arrivé lorsque j'avais componentWillMount() défini 2x dans la même classe. Cela n'a pas produit une erreur d'exécution. J'ai simplement supprimé la deuxième définition et les choses ont commencé à travailler.

    • Solution rapide! Merci.. Ce qui semble être une erreur honnête. Même j'ai fini par l'ajout de 2 componentDidMount est dans la même classe résultant de la première étant substituée.. Merci!
    InformationsquelleAutor P.Brian.Mackey
  2. 24

    Donc... voilà.... J'ai finalement obtenu de travail(avec l'aide d'un expert). La raison pour laquelle le "componentDidMount" méthodes n'étaient pas de tir était parce que mon serveur a été le regroupement et le service de tous les réagissent + html truc sur le côté de serveur. (Seulement "render" et "getInitialState" méthodes appelées à créer le "html" modèle est livré par le navigateur du client...mais ça s'arrête là, car il pense qu'il est fini)

    Le correctif: Trouver un moyen de délivrer un "compilé" en html par le serveur ET en plus, permettre de réagir propres manifestations à être accessible et "fireable" de nouveau sur le côté client. Lors de la compilation de mon fichier "view" ( index.js ou index.html ), j'ai inclus une "Application.start()" script qui permet de faire de mon bundle.js code dans le template. Ensuite dans mon gulpfile, l'exportation de la "Demande" de la variable de sorte que la "vue" fichier peut y accéder.

    Gahh...tiré mes cheveux pour cela. De temps à lire sur les côté serveur vs le rendu côté client

    • Je me suis fait avoir exactement le même problème. Je vais appeler componentDidMount() dans un parent et son enfant composant. Il tire en l'enfant, mais pas le composant parent. Je ne suis pas tout à fait comprendre ce que vous avez fait pour le résoudre.
    • Problème intéressant. Votre problème est un peu différente de la mienne puisque, dans tous mes composants(enfant + parent), le "componentDidMount" n'a pas le feu. Dans votre cas, vérifiez s'il y a une typo. Si "componentDidMount" est capable de feu pour un enfant, il devrait être en mesure de tirer avec votre composant parent.
    InformationsquelleAutor user3295436
  3. 4

    J'ai le créer-réagir-modèle d'application. J'ai ajouté le ComponentDidMount dans l'Application de la Composante. J'ai mis une console.journal et une alerte en elle. Il ne se déclenche pas et il n'y a pas d'erreurs dans la réaction ou le navigateur. J'ai essayé sur chrome et firefox.

    CORRECTIF: ce qui a fonctionné pour moi a été de redémarrer mon pc. Puis il a commencé à travailler. Je ne sais pas pourquoi, mais cela résoudre le problème.

    Mise à jour: ai-je Pas avoir une majuscule, 'C', c'est 'componentDidMount' pas 'ComponentDidMount'.. je pense qu'il est temps pour le sommeil.

    • Après le redémarrage du mnp, il a travaillé.
    InformationsquelleAutor Sigex
  4. 3

    Vous avez besoin de changer votre module.les exportations de point à RecipePage pas TestPage

    module.exports = RecipePage;
    • J'ai changé le nom d'exportation de match "RecipePage"...espérais que serait le réparer, mais toujours pas à obtenir des résultats.... aucune chance que cela peut avoir quelque chose à voir avec le côté serveur?
    • où en êtes-vous à l'aide de cette RecipePage?
    • RecipePage est un composant de la page appelée par le Réagir Routeur. C'est une "page" de la composante qui obtient récupérée dans le "App" composant parent
    InformationsquelleAutor Yang Li
  5. 3

    Dans mon cas, il y avait un autre componentDidMount plus haut dans le code

    InformationsquelleAutor user5480949
  6. 0

    Dans mon cas, j'ai importé un composant sans le export default de commande dans le fichier importé. Quand j'ai corrigé cela, componentDidMount commencé à tirer...

    InformationsquelleAutor King James Enejo
  7. 0

    Dans mon cas, j'appelle componentDidMount() pour récupérer les données de service (appel d'API) et sur la fonction rendu je possède des composants qui suppose d'utiliser les données que le retour de cet appel,
    mais parce que l'appel est Async le render() la fonction est appelée immédiatement puis c'est crash(obtenir beaucoup d'erreurs du genre: "TypeError:propriété de lecture "XXXX " undefined" ) ensuite c'est ressembler à componentDidMount il ne s'appelle pas du tout.
    Pour résoudre ce problème j'ai vérifier sur le rendu que myData !== null avant de retourner le composant lui-même - Vous pouvez utiliser le chargeur générique\spinner sur cette affaire qui ne sera pas rendu composant interne qui utilisent les données avant que le fait de récupérer de service.

    Exemple:

    componentDidMount() {
    const { GetMyDataFromServiceFunc } = this.props;

    GetMyDataFromServiceFunc ("150288");
}

render() {
    const { details, loading } = this.props;

    if (!details)
        return (<GenericLoader />);

        return (

        <FullScreenModal
            <Wizard className="order-new-wizard">

                <Component1 editable={false} dataToComponent1={details}
                    goNextStep={this.goNextStep} /> 

                <Component2 values={details.customerDetail} goNextStep={this.goNextStep} />
            </Wizard>
        </FullScreenModal>
        );
    }
    InformationsquelleAutor Yohan