React: tell état que l'instance de classe a muté

Question

J'ai cette classe:

class MyClass { 
    constructor() { 
    this.value = 'foo'; 
    } 

    mutate() { 
    this.value = 'bar'; 
    } 
} 

Et un composant qui a une instance dans son état:

let Component = React.createClass({ 
    getInitialState: function() { 
    return { 
     element: new Myclass() 
    }; 
    }, 
    mutateElement: function() { 
    this.state.element.mutate(); 
    } 
}); 

Comment puis-je laisser <Component /> savoir que this.state.element a muté et qu'il a besoin de re-rendre?

L'utilisation React immutability Helpers ne fonctionne pas comme la syntaxe suivante n'est pas valide:

mutate() { 
    this = update(this, {value: {$set: 'bar'}); 
} 

Answer 1

Il y a deux façons d'aller à ce sujet. La première est la manière facile: this.forceUpdate() Mais réagir spécifiquement tells pour l'éviter autant que possible. Mais je pense que vous avez un cas d'utilisation valide.

let Component = React.createClass({ 
    getInitialState: function() { 
     return { element: new Myclass() }; 
    }, 
    mutateElement: function(){ 
     this.state.element.mutate(); 
     this.forceUpdate(); 
    } 
}); 

Mais si vous voulez coller avec ne pas utiliser this.forceUpdate() vous pourriez avoir une autre variable dans l'état et régler cela.

let Component = React.createClass({ 
    getInitialState: function() { 
     return { element: new Myclass(), 
     hasChanged: false }; 
    }, 
    mutateElement: function(){ 
     this.state.element.mutate(); 
     this.setState({hasChanged: true}); 
    } 
}); 

Ceci le fera muter et rendra également votre composant.