Pourquoi méthode componentDidMount ne pas être appelé à reactjs.net quand j'écris sur JSX

Question

Je suis un noob et je suis en train de compiler un JSX suivant ce tutoriel:

http://xabikos.com/2015/03/18/Using-Reactjs-net-in-Web-Forms/

utilisant reactjs.net ``

Dans mon HelloWorld.jsx

class PageContent extends React.Component { 


    componentDidMount() { 
       this.state = { name: "Hello World from ComponentDidMount" }; 
    } 

    constructor(props) { 
     super(props); 
     this.state = { name: "Hello World" }; 
    } 

    componentWillMount() { 
     this.state = { name: "Hello World from ComponentWIllMount" }; 
    } 

    render() { 

     return <h1>{this.state.name}</h1> 
    } 

} 

Dans mes ReactConfig.cs

 ReactSiteConfiguration.Configuration 
     .AddScript("~/Scripts/components/helloWorld.jsx"); 

Dans mes Default.aspx.cs

 var env = AssemblyRegistration.Container.Resolve<IReactEnvironment> 
     (); 
     var objectModel = new { user = "React User" }; 
     var reactComponent = env.CreateComponent("PageContent", 
     objectModel); 

     PageContent.Text = reactComponent.RenderHtml(); 

La page semble fonctionne très bien

il imprime

"Bonjour tout le monde de Component monterai"

Mais quand je commente le Component Will Mount, je ne reçois rien de DidM ontant, il imprime seulement

« Bonjour tout le monde »

Quelqu'un sait-il pourquoi cette méthode n'a jamais appelé?

Nous vous remercions à l'avance

Answer 1

Votre problème est que vous ne l'utilisez this.setState. Vous attribuez manuellement une nouvelle valeur au this.state. React ne sait pas appeler à nouveau render pour mettre à jour votre composant, ce qui explique pourquoi votre composant ne se met pas à jour. Ce n'est pas que this.state n'a pas changé. C'est qu'on n'a pas dit à React de mettre à jour ce qui est montré sur l'écran. Alors, voici ce qui se passe avec votre code en termes de cycle de vie:

1. constructor: tout initialise (duh)
2. componentWillMount: Dans votre cas, la mise en this.state.name. rendu ne se produit pas encore
3. render: this.state.name rend, que vous avez mis dans votre componentWillMount
4. componentDidMount: ensembles this.state.name à votre nouvelle valeur. aucune instruction pour mettre à jour votre fonction Render

Si vous utilisez this.forceUpdate() dans votre componentDidMount, après avoir affecté this.state.name à sa nouvelle valeur, je crois qu'il mettrait à jour, mais cela est très mauvaise pratique. Utilisez this.setState à la place.

componentDidMount() { 
    this.setState({ name: "Hello World from ComponentDidMount" }); 
} 

componentWillMount() { 
    this.setState({ name: "Hello World from ComponentWillMount" }); 
} 

Comme vous l'avez remarqué dans votre code, this.setState est pas tout à fait nécessaire componentWillMount, parce render n'a pas encore été appelée.Mais il est bon de garder les choses cohérentes.