J'essaie d'importer une classe dans une classe de réaction, mais lorsque l'objet change dans la classe, il renvoie indéfini.
class Test {
constructor(){
this.obj = {}
}
testFunc(){
this.obj.one = 'two'
// this returns the value
console.log(this.obj.one)
}
}
class App extends Component{
constructor(){
super()
this.testClass = new Test()
}
componentDidMount(){
this.testClass.testFunc()
// this returns undefined
console.log(this.testClass.obj.one)
}
}
3 Réponses :
Je pense que vous avez manqué de rendu sur l'application Composant:
constructor(){
this.obj = {};
}
testFunc() {
this.obj.one = 'two';
// this returns the value
console.log(this.obj.one);
}
}
class App extends React.Component{
constructor(){
super()
this.testClass = new Test();
}
componentDidMount(){
this.testClass.testFunc();
console.log('value =>', this.testClass.obj.one);
}
render() {
return <div />;
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Je pense, si vous souhaitez utiliser console.log (this.testclass.obj.one) Vous devez retourner cette clé Travaillez dans testfunc () fonction
Le ceci dans l'expression this.testclass.obj.one fait référence à l'instance de app . Si vous retournerez ceci à partir de testfunc , vous obtenez une instance de test . Étant donné que app a déjà une instance de test attribué à this.testclass et c'est la idem instance Ceci.TestClass.tsfuncunc () reviendrait, il n'est pas pertinent s'il le renvoie ou non.
I have done few tweaks. Your code is working fine and returning the expected results. you can check the fiddle:JS Fiddle
Êtes-vous sûr? Dis-tu
this.testclass.tesfuncunc () sortiesdeux maisconsole.log (thisestclass.obj.one) sortiesindéfini ? parce que, en supprimant les trucs de réactjs de votre code, cela fonctionne bienPeut-être que vous ne voyez pas un
2 sur la sortie de la console qui signifieraitdeux a été envoyé à la console deux fois - et lenon défini est de quelque chose d'autre ... Essayezconsole.log ('in composentdidmount', cela.testclass.obj.one)ok donc si je fais
console.log (this.testclass.obj) chrome console ne montrera que{} mais si je définis une valeur dans le constructeur de la classe de testthis.obj = {test: "test"} qui affichera{test: "test"} dans la console chromePourrait-il être que vous n'êtes pas contraignant la méthode TestFuncC à votre classe classe ? Essayez d'ajouter cette ligne à votre constructeur:
this.tesfunc = ceci.testfunc.bind (this)a toujours le même résultat
Dans la console Chrome, les valeurs montrent si j'élans l'objet
Cela ressemble à un problème d'async typique. Vous accédez à la propriété avant qu'il ait été défini. Votre code actuel doit être différent. S'il vous plaît poster un meilleur exemple. Mais probablement un duplicata de Pourquoi ma variable est-elle non altérée après que je la modifie à l'intérieur d'une fonction? - Référence de code asynchrone .
Je pense que vous pourriez avoir raison