0
votes

Attribuer une valeur à une variable hors classe

J'accède au fichier JSON dans ComponentDidMount dans la classe A, je dois accéder à ce résultat en dehors de la classe et je dois l'utiliser dans la classe B

let test;
console.log(test);
class CustomerPage extends React.Component {
  componentDidMount(): void {
    $.getJSON("/api/LocaleStrings")
      .done(results => {
        let JsonString = JSON.parse(results);
        test = new LocalizedStrings(JsonString);
      })
     .fail(console.log.bind(console));
  }
}

Ici, console.log ( test) donne non défini.

reactjs typescript

2 commentaires

Utilisez state pour stocker votre baie et l'utiliser là où vous souhaitez l'utiliser

Pouvez-vous s'il vous plaît me montrer comment je peux utiliser cela dans mon code

3 Réponses :

0
votes

Je recommande de lire un peu plus sur la façon dont les composants React partagent les données. Le composant qui a besoin des données peut avoir une entrée définie, dans laquelle vous pouvez passer la variable de test. Ou en utilisant un magasin redux (qui pourrait potentiellement être un peu trop complexe pour votre application). Si vous voulez vraiment continuer sur cette route. Vous pouvez toujours utiliser l'objet window pour définir une variable globale: window.test = 'bla'; . Ceci est disponible n'importe où dans l'application avec console.log (window.test); .

Vous devrez mettre à jour votre code pour: window.test = new LocalizedStrings (JsonString); .

La vérification de sa définition peut être effectuée avec un intervalle:

setInterval(function() {
   console.log(window.test);
 }, 100);

3 commentaires

Mmm, vous avez changé votre code. Le test de variable n'est disponible qu'après le chargement du JSON. Si vous ajoutez console.log (test) juste après test = new LocalizedStrings (JsonString); il devrait l'imprimer correctement. La question est plus, pourquoi voulez-vous avoir la variable «test» disponible en dehors du composant de réaction?

Je veux utiliser cette valeur dans une autre classe.

Je recommande de lire un peu plus sur la façon dont les composants React partagent les données. Le composant qui a besoin des données peut avoir une entrée définie, dans laquelle vous pouvez passer la variable test . Ou en utilisant un magasin redux (ce qui est assez complexe). Si vous voulez vraiment continuer sur cette route. Vous pouvez toujours utiliser l'objet window pour passer la variable: window.test = 'bla' . Ceci est disponible partout.

0
votes

Il me semble que votre console.log (test) est exécuté avant le retour de l'appel AJAX, et à ce moment-là, il ne sera pas initialisé ( undefined ). Placez votre console.log dans la fonction done .

Vous pouvez stocker votre résultat AJAX dans l'état de votre composant:

class CustomerPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { test: null };
  }
  componentDidMount(): void {
    $.getJSON("/api/LocaleStrings")
      .done(results => {
        let JsonString = JSON.parse(results);
        this.setState({
          test: new LocalizedStrings(JsonString);
        });           
      })
     .fail(console.log.bind(console));
  }
}

2 commentaires

J'ai besoin de l'utiliser dans une autre classe, donc je n'attribue qu'une classe en dehors.

Dans ce cas, les réponses de @apokryfos sont ce que vous voulez.

0
votes

Vous devez avoir un "événement" qui notifie à toute personne intéressée que le test est disponible:

<CustomerPage onLocaleStringsLoaded={window.console.log.bind(window.console)} />

Ensuite, à un moment donné de votre code, vous pourriez avoir :

interface CustomerPageProps {
   onLocaleStringsLoaded?: (test:object) => void
}

class CustomerPage extends React.Component<CustomerPageProps> {
  static defaultProps {
       onLocaleStringsLoaded: () => {} //nothing by default
  }
  componentDidMount(): void {
    $.getJSON("/api/LocaleStrings")
      .done(results => {
        let JsonString = JSON.parse(results);
        const test = new LocalizedStrings(JsonString);
        this.props.onLocaleStringsLoaded(test);
      }).fail(console.log.bind(console));
  }    
}

qui s'imprimera sur la console une fois que le résultat sera disponible.

0 commentaires